javascript中addEventListener和onclick的區別
阿新 • • 發佈：2021-07-07
先來看addEvenListener事件。
addEventListener() 方法用於向指定元素新增事件控制代碼。 提示： 使用 removeEventListener() 方法來移除
addEventListener() 方法新增的事件控制代碼。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="button1" >按鍵1</button> <p id="event">滑鼠事件</p> <button id="button2">按鈕2</button> <button id="button3">按鈕3</button> <script> //請在此處編寫程式碼 /********** Begin **********/ var x=document.getElementById("button1"); x.addEventListener("mouseout", mouse_move);//滑鼠移開事件 x.addEventListener("mouseover", mouse_on);//滑鼠聚焦事件 x.addEventListener("click", mouse_click);//滑鼠點選事件 function mouse_move() { document.getElementById("event").innerHTML+="滑鼠移開<br>"; //在p標籤後新增html } function mouse_on() { document.getElementById("event").innerHTML+="滑鼠聚焦<br>"; } function mouse_click() { document.getElementById("event").innerHTML+="滑鼠點選<br>"; } /********** End **********/ </script> </body> </html>
這裡的button2可以使用addEventListener()同時監聽多個事件。而且事件不會被覆蓋。
注意：這裡的script標籤不能放在head裡面，因為我們得先載入完html標籤，才能使用監聽事件。
拓展：mouseup ()當滑鼠指標移動到元素上方，並鬆開滑鼠左鍵時，會發生 mouseup 事件。
mousedown()當滑鼠指標移動到元素上方，並按下滑鼠左鍵時，會發生 mousedown 事件。
mouseenter ()當滑鼠指標穿過（進入）被選元素時，會發生 mouseenter 事件。
mouseleave ()當滑鼠指標離開被選元素時，會發生 mouseleave 事件
我們再來看看onclick()的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="click_on">onclick</p> <script> var click1=document.getElementById("click_on"); click1.onclick=function () {alert("第一個click")}; click1.onclick=function() {alert("第二個click")}; </script> </body> </html>
這裡只打印第二個click；表明使用多個onclick會被覆蓋。
所以onclick和addEventListener事件區別是：onclick事件會被覆蓋，而addEventListener可以先後執行不會被覆蓋，addEventListener可以監聽多個事件。
from:https://blog.csdn.net/qq_42444795/article/details/105264243