JS事件綁定的常用方式實例總結

2024-05-06 16:48:39

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS事件綁定的常用方式。分享給大家供大家參考，具體如下：

常用的事件綁定的幾種方式有三種：

直接在 dom 元素上進行綁定。
用 on 綁定。
用 addEventListener、attachEvent 綁定。

一、直接在 dom 元素上進行綁定

<input id="btn1" type="button" onclick="test();" />

二、用 on 綁定

兼容性：在IE，FF，Chrome，Safari，Mozilla，Opera下都適用。

// onclick綁定document.body.onclick = () => {  console.log(111)}// 解綁document.body.onclick = null;

但是，同一個 dom 元素上，on 只能綁定一個同類型事件，后者會覆蓋前者，不同類型的事件可以綁定多個。

三、用 addEventListener、attachEvent 綁定

同一個 dom 元素上，用 addEventListener、attachEvent 可以綁定多個同類型事件。

但是，addEventListener 事件執行順序按照事件綁定的先后順序執行；attachEvent 事件執行順序則是隨機的。

addEventListener

// 綁定document.body.addEventListener('click', bodyClick, false);// 解綁document.body.removeEventListener('click', bodyClick, false);

注意：removeEventListener 第二個參數要和 addEventListener 指向同一個函數才能解綁成功。

addEventListener 的第三個參數若為 false，函數在冒泡階段執行；若為 true，函數在捕獲階段執行。默認為 false。

<div id="box">   <div id="child"></div></div>

box.addEventListener("click", function(){  console.log("box");}, false);child.addEventListener("click", function(){  console.log("child");});// 執行順序為 child box

box.addEventListener("click", function(){  console.log("box");}, true);child.addEventListener("click", function(){  console.log("child");});// 執行順序為 box child

兼容性

Chrome 和 FireFox 只支持 addEventListener；IE 只支持 attachEvent（IE11開始不支持了）。

所以必須對2種方法做兼容處理。原理是先判斷 attachEvent 是否為真，如果為真則用 attachEvent 綁定事件，否則用 addEventListener 綁定事件。

可以封裝一個函數做兼容性處理：

//dom綁定事件的元素，ev事件名，fn執行函數function myAddEvent(dom, ev, fn){  if(dom.attachEvent){    dom.attachEvent("on"+ev, fn);  }else {    dom.addEventListener(ev, fn, false);  }}myAddEvent(d1, "click", ()=>{  console.log(1111)});

另外

以上三種方式綁定的點擊事件都可以用下面這條語句觸發