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