JavaScript onclick 和 click 的區(qū)別詳解
也就是 addEventListener 和 on 的區(qū)別
為什么需要 addEventListener？
先來(lái)看一個(gè)片段：
<div id ="box">測(cè)試</div>
用 on 的代碼：
windwo.onload = function(){
var box = document.getElementById("box");
box.onclick = ()=>console.log("我是 box1");
box.onclick = ()=>console.log("我是 box2");
}
// 運(yùn)行結(jié)果 ： 我是 box2
看到了吧，第二個(gè) onclick 事件把第一個(gè)onclick 給覆蓋了，雖然大部分情況我們用 on 就可以完成我們想要的效果，但是有時(shí)我們又需要執(zhí)行多個(gè)相同的事件，很明顯如果用 on 是無(wú)法實(shí)現(xiàn)的。但是可以使用 addEventListener 實(shí)現(xiàn)多次綁定同一個(gè)事件并且不會(huì)覆蓋上一個(gè)事件。
用 addEventListener 的代碼
window.onload = function(){
var box = document.getElementById("box");
box.addEventListener("click",()=>console.log("我是 box1"));
box.addEventListener("click",()=>console.log("我是 box2"));
}
// 運(yùn)行結(jié)果： 我是 box1
//我是 box2
addEventListener 方法第一個(gè)參數(shù)填寫(xiě)事件名，注意不需要寫(xiě) on ，第二個(gè)參數(shù)可以是一個(gè)函數(shù)，第三個(gè)參數(shù)是指在冒泡階段還是捕獲處理事件程序，如果為 true 代表捕獲階段處理，如果是 false代表冒泡階段處理，第三個(gè)參數(shù)可以省略，大多數(shù)情況也不需要用到第三個(gè)參數(shù)，不寫(xiě)第三個(gè)參數(shù)默認(rèn)false。
第三個(gè)參數(shù)的使用
有時(shí)候的情況是這樣的：
<body>
<div id = "box">
<div id = "child"></div>
</div>
</body>
如果我給 box 加 cclick 時(shí)間，如果我直接單擊 box 沒(méi)有什么問(wèn)題，但是如果我單擊的是child元素，那么它是怎么樣執(zhí)行的？
box.addEventListener("click",()=>console.log("box"));
child.addEventListener("click",()=>console.log("child"));
// 執(zhí)行結(jié)果：child -> box
也就是說(shuō)，默認(rèn)情況是按照事件冒泡的執(zhí)行順序進(jìn)行的
如果第三個(gè)參數(shù)寫(xiě)的是 true，則按照事件捕獲的執(zhí)行順序進(jìn)行
總結(jié)
1.onclick 事件在同一時(shí)間只能指向一個(gè)對(duì)象
2.addEventListener可以給一個(gè)事件注冊(cè)多個(gè) listener
3.addEventListener 對(duì)于任何 dom 元素都是有效的，而 onclick 僅限于 html 元素
4.addEventListener可以控制 listener 的觸發(fā)階段（捕獲/冒泡）
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript關(guān)鍵字this的用法總結(jié)
這篇文章介紹了JavaScript關(guān)鍵字this的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Javascript基礎(chǔ)_嵌入圖像的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇Javascript 基礎(chǔ)_嵌入圖像的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
javascript中instanceof運(yùn)算符的用法詳解
本文詳細(xì)講解了javascript中instanceof運(yùn)算符的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
js閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。具體怎么理解呢，各位看官請(qǐng)仔細(xì)看好下文2014-11-11
鍵盤(pán) keycode的值 javascript時(shí)觸發(fā)事件時(shí)很有用的要素
鍵盤(pán)keycode的值 編寫(xiě)javascript時(shí)觸發(fā)事件時(shí)很有用的要素,大家可以收藏一下。2009-11-11
下面小編就為大家?guī)?lái)一篇JS函數(shù)定義方式的區(qū)別介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，給大家一個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-03
javascript實(shí)現(xiàn)用戶必須勾選協(xié)議實(shí)例講解
這篇文章主要介紹了javascript實(shí)現(xiàn)用戶必須勾選協(xié)議實(shí)例講解,寫(xiě)頁(yè)面的時(shí)候經(jīng)常會(huì)用到，有感興趣的同學(xué)可以學(xué)習(xí)下2021-03-03
這篇文章主要介紹了詳解JavaScript閉包問(wèn)題,通過(guò)案例一步步進(jìn)行講解了該項(xiàng)技術(shù)問(wèn)題,講述了變量的作用域,閉包的概念和作用,需要的朋友可以參考下2021-06-06
Javascript基礎(chǔ)教程之for循環(huán)
這篇文章主要介紹了Javascript基礎(chǔ)教程之for循環(huán)的相關(guān)資料以及示例分享,需要的朋友可以參考下2015-01-01
快速解決Canvas.toDataURL 圖片跨域的問(wèn)題
出現(xiàn)Canvas.toDataURL 圖片跨域問(wèn)題怎么解決呢？下面小編就為大家?guī)?lái)一篇Canvas.toDataURL 圖片跨域問(wèn)題的快速解決方法。一起跟隨小編過(guò)來(lái)看看吧2016-05-05