這期內(nèi)容當中小編將會給大家?guī)碛嘘PJavaScript中有哪些事件綁定的方式，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)膠州免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

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

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

二、用 on 綁定

兼容性：在IE，F(xiàn)F，Chrome，Safari，Mozilla，Opera下都適用。

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

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

三、用 addEventListener、attachEvent 綁定

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

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

addEventListener

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

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

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

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

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

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

兼容性

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

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

可以封裝一個函數(shù)做兼容性處理：

//dom綁定事件的元素，ev事件名，fn執(zhí)行函數(shù)
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)
});

另外

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

document.getElementById("btn").click();

上述就是小編為大家分享的JavaScript中有哪些事件綁定的方式了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標題：JavaScript中有哪些事件綁定的方式
文章出自：http://jinyejixie.com/article46/gggohg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、虛擬主機、自適應網(wǎng)站、網(wǎng)站制作、Google、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)