JS新增事件和解綁事件:addEventListener()與removeEventListener()
作用:
addEventListener()與removeEventListener()用於處理指定和刪除事件處理程式操作。
它們都接受3個引數:事件名、事件處理的函式和布林值。
布林值引數是true,表示在捕獲階段呼叫事件處理程式;如果是false,表示在冒泡階段呼叫事件處理程式。
示例:
環境:移動端,介面禁止觸控事件
要在body上新增事件處理程式,可以使用下列程式碼:
document.body.addEventListener('touchmove', function (event) { event.preventDefault();},false);
通過addEventListener()新增的事件處理程式只能使用removeEventListener()來移除;移除時傳入的引數與新增處理程式時使用的引數相同。這也
意味著通過addEventListener()新增的匿名函式無法移除
錯誤用法示例:
document.body.addEventListener('touchmove', function (event) { event.preventDefault(); },false); document.body.removeEventListener('touchmove', function (event) { event.preventDefault(); },false);
這個例子中,我使用addEventListener()新增一個事件處理程式。雖然呼叫removeEventListener(0是看似使用了相同的引數,但實際上,第二個引數與傳入addEventListener()中的那一個完全不同的函式。而傳入removeEventListener()中的事件處理程式函式必須與傳addEventListener()中的相同
正確用法示例:
function bodyScroll(event){ event.preventDefault(); }document.body.addEventListener('touchmove',bodyScroll,false); document.body.removeEventListener('touchmove',bodyScroll,false);
重寫後的這個例子沒有問題,是因為在addEventListener()和removeEventListener()中用來相同的函式。
共用函式不能帶引數,錯誤用法示例:
function bodyScroll(event){ event.preventDefault(); }document.body.addEventListener('touchmove',bodyScroll(event),false); document.body.removeEventListener('touchmove',bodyScroll(event),false);
總結:
一:相同事件繫結和解除,需要使用共用函式;
二:共用函式不能帶引數;
addEventListener注意問題
- document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
但是有另外一個需求是需要將以上的'touchmove'恢復為預設的。開始我直接使用removeEventListener,但是不起作用。後來發現如果要讓removeEventListener成功的話需要把裡面function單獨封裝成一個方法。
- function preventDefault(e) { e.preventDefault(); };
- document.addEventListener('touchmove', preventDefault, false);
- document.removeEventListener('touchmove', preventDefault, false);
把操作封裝成一個單獨的方法,呼叫時引用同一個方法,listener才能準確找到。如果直接寫在引數裡,會認為是兩個function(e)是不同的操作,所以不能remove成功。
注:JS每次使用addEventListener後,該事件函式為全域性監聽,每次不使用時必須
removeEventListener掉,不然容易出錯,例如每次進入該介面時都會註冊一個相同
的事件