全面了解addEventListener和on的區(qū)別

更新時(shí)間：2016年07月14日 09:26:57 投稿：jingxian

下面小編就為大家?guī)硪黄媪私鈇ddEventListener和on的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

為什么需要addEventListener？

先來看一個(gè)片段：

html代碼

用on的代碼

window.onload = function(){
  var box = document.getElementById("box");
  box.onclick = function(){
    console.log("我是box1");
  }
  box.onclick = function(){
    box.style.fontSize = "18px";
    console.log("我是box2");
  }
}
　　　　　運(yùn)行結(jié)果：“我是box2”

看到了吧，第二個(gè)onclick把第一個(gè)onclick給覆蓋了，雖然大部分情況我們用on就可以完成我們想要的結(jié)果，但是有時(shí)我們又需要執(zhí)行多個(gè)相同的事件，很明顯如果用on完成不了我們想要的，那不用猜，你們肯定知道了，對(duì)！addEventListener可以多次綁定同一個(gè)事件并且不會(huì)覆蓋上一個(gè)事件。

用addEventListener的代碼

window.onload = function(){
  var box = document.getElementById("box");
  box.addEventListener("click",function(){
    console.log("我是box1");
  })
  box.addEventListener("click",function(){
    console.log("我是box2");
  })
}
　　　　運(yùn)行結(jié)果：我是box1
　　　　　　　　　我是box2

addEventListenert方法第一個(gè)參數(shù)填寫事件名，注意不需要寫on，第二個(gè)參數(shù)可以是一個(gè)函數(shù)，第三個(gè)參數(shù)是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理，第三個(gè)參數(shù)可以省略，大多數(shù)情況也不需要用到第三個(gè)參數(shù),不寫第三個(gè)參數(shù)默認(rèn)false

第三個(gè)參數(shù)的使用

有時(shí)候的情況是這樣的

如果我給box加click事件，如果我直接單擊box沒有什么問題，但是如果我單擊的是child元素，那么它是怎么樣執(zhí)行的？（執(zhí)行順序）

box.addEventListener("click",function(){
  console.log("box");
})

child.addEventListener("click",function(){
  console.log("child");
})
　　執(zhí)行的結(jié)果：
　　　　　　　　child
　　　　　　　　box

也就是說，默認(rèn)情況事件是按照事件冒泡的執(zhí)行順序進(jìn)行的。

如果第三個(gè)參數(shù)寫的是true，則按照事件捕獲的執(zhí)行順序進(jìn)行的。

box.addEventListener("click",function(){
  console.log("box");
},true)

child.addEventListener("click",function(){
  console.log("child");
})
　　執(zhí)行的結(jié)果：
　　　　　　　　box
　　　　　　　　child

事件冒泡執(zhí)行過程：

從最具體的的元素（你單擊的那個(gè)元素）開始向上開始冒泡，拿我們上面的案例講它的順序是：child->box

事件捕獲執(zhí)行過程：

從最不具體的元素（最外面的那個(gè)盒子）開始向里面冒泡，拿我們上面的案例講它的順序是：box->child

以上這篇全面了解addEventListener和on的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: