JS中事件繫結的2種方式

2021-08-20 10:38:36 字數 981 閱讀 8534

首先,在body裡寫一些內容。

接著,css隨便寫一下,然後在js中獲取頁面元素後開始操作

1,繫結事件方式一:on+事件名

* 1,只能新增乙個事件處理函式(繫結乙個)

* 2,如果多次繫結,後面的事件會覆蓋掉前面的事件。

*  * 取消繫結:事件 = null

* 例如:元素.onclick = null;

2,事件繫結方式二:addeventlistener 方式

(1)  * 語法結構:元素.addeventlistener(引數一,引數二,引數三)

* 引數一:事件名稱

* 引數二:要觸發的事件

* 引數三:boolean值,是否要捕獲的意思。true 代表捕獲方式處理,false代表冒泡方式處理。預設值 false

*  * 作用:

* 1,為元素繫結事件,同時 可以新增多個事件處理函式

* 2,觸發時 會按照事件繫結的先後順序,依次觸發

*  * *******ie 6,7,8不支援addeventlistener*****

* 使用 attachevent("事件名",事件處理函式)來繫結事件。

2) 取消事件繫結:removeeventlistener("事件名",事件處理函式,是否捕獲)

*  * 

* *******ie6, 7,8*****

* 使用detachevent("事件名",事件處理函式)來取消事件繫結

*  * 如果繫結事件時使用的是匿名函式,該匿名函式無法取消繫結。

JS事件繫結三種方式

1.在html標籤中直接繫結 2.在js中獲取到相應的dom元素後繫結 重複繫結會覆蓋之前繫結的onclick事件let button1 document.getelementbyid btn1 button1.onclick function 3.在js中使用addeventlistener 實現...

JS繫結事件的三種方式

一.xhtml 繫結方式 type button onclick test type button onclick 若干句js 二.dom繫結方式 推薦 優點 內容和行為分離 dom物件.事件 事件處理函式 var btn1 document.getelementbyid btn1 btn1.onc...

js事件繫結的幾種方式

1 點選按鈕 2 使js 與hrml標籤分離,文件結構清晰,便於開發和管理 1 點選按鈕 2 繫結語法 element.attachevent event,function event 必需 事件型別,需要加 on function 必需 指定事件觸發時執行的函式 1 點選按鈕 2 事件處理函式中,...