html DOM元素有很多on開頭的監聽事件,如onload、onclick等,見DOM事件列表。但是同一種事件,後面註冊的會覆蓋前面的:
window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改變視窗大小時,只會彈出2
addEventListener監聽
利用addEventListener新增監聽事件,可以重複新增,並不會互相覆蓋:
window.addEventListener("resize",function(){ alert(1) }) window.addEventListener("resize",function(){ alert(2) }) // 改變視窗大小時,先後彈出1和2
注意這裡面的事件是不帶”on”字首的。
removeEventListener移除監聽
removeEventListener跟addEventListener相對應,用於移除事件監聽。
如果要移除事件控制程式碼,addEventListener() 的執行函式必須使用外部具名函式,匿名函式事件是無法移除的。
// 匿名函式事件無法移除 window.addEventListener("resize",function(){ alert(1) }) // 監聽具名函式事件 function myResize(){ alert(2) } window.addEventListener("resize",myResize) // 移除事件監聽 window.removeEventListener("resize",myResize)