JavaScript中有哪些事件綁定的方式

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

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

一、直接在 dom 元素上進(jìn)行綁定

二、用 on 綁定

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

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

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

三、用 addEventListener、attachEvent 綁定

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

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

addEventListener

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

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

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

box.addEventListener("click", function(){
  console.log("box");
}, false);
child.addEventListener("click", function(){
  console.log("child");
});
// 執(zhí)行順序?yàn)?nbsp;child box

box.addEventListener("click", function(){
  console.log("box");
}, true);
child.addEventListener("click", function(){
  console.log("child");
});
// 執(zhí)行順序?yàn)?nbsp;box child

兼容性

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

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

可以封裝一個(gè)函數(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)
});

另外

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

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

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

當(dāng)前題目：JavaScript中有哪些事件綁定的方式
標(biāo)題路徑：http://weahome.cn/article/gggohg.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

JavaScript中有哪些事件綁定的方式

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管