首頁  >  文章  >  web前端  >  詳解addEventListener與on的差別

詳解addEventListener與on的差別

黄舟
黄舟原創
2017-12-04 15:25:032440瀏覽

我們在之前的文章中為大家介紹了關於JavaScript中addEventListener的使用,相信小夥伴麼對addEventListener都有了進一步的了解,那麼我們今天繼續給大家介紹詳解addEventListener與on的差別!

為什麼需要addEventListener?

先來看一個片段:

html程式碼

<div id="box">追梦子</div>

用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");
    }
}
     运行结果:“我是box2”

看到了吧,第二個onclick把第一個onclick給覆蓋了,雖然大部分情況我們用on就可以完成我們想要的結果,但是有時我們又需要執行多個相同的事件,很明顯如果用on完成不了我們想要的,那不用猜,你們一定知道了,對! addEventListener可以多次綁定相同事件並且不會覆寫上一個事件。

用addEventListener的程式碼

window.onload = function(){
    var box = document.getElementById("box");
    box.addEventListener("click",function(){
        console.log("我是box1");
    })
    box.addEventListener("click",function(){
        console.log("我是box2");
    })
}
    运行结果:我是box1
         我是box2

addEventListenert方法第一個參數填入事件名,注意不需要寫on,第二個參數可以是一個函數,第三個參數是指在冒泡階段還是捕獲階段處理事件處理程式,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理,第三個參數可以省略,大多數情況也不需要用到第三個參數,不寫第三個參數預設false

第三個參數的使用

有時候的情況是這樣的

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

如果我給box加click事件,如果我直接點擊box沒有什麼問題,但是如果我點擊的是child元素,那麼它是怎麼樣執行的? (執行順序)

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

child.addEventListener("click",function(){
    console.log("child");
})
  执行的结果:
        child
        box

也就是說,預設事件是按照事件冒泡的執行順序進行的。

如果第三個參數寫的是true,則按照事件捕獲的執行順序進行的。

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

child.addEventListener("click",function(){
    console.log("child");
})
  执行的结果:
        box
        child

事件冒泡執行過程:

        從最具體的的元素(你點擊的那個元素)開始向上開始冒泡,拿我們上面的案例講它的順序是: child->box

事件捕捉執行過程:

        從最不具體的元素(最外面的那個盒子)開始向裡面冒泡,拿我們上面的案例講它的順序是:box->child

總結:

#透過對實例的方法詳述了addEventListener與on的差異、詳細小夥伴們對addEventListener與on的使用有了進一步的了解,希望對你的工作有幫助!

相關推薦:

#JavaScript中addEventListener的使用詳解

JavaScript中addEventListener的使用詳解

javascript DOM物件學習之事件流addEventListener()使用教學

#######解析js中addEventListener()與removeEventListener()### ######

以上是詳解addEventListener與on的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn