JavaScript中，四種事件繫結方法及attachEvent與addEventListener的區別
阿新 • • 發佈：2019-01-08
我們在對事件進行繫結的時候，除了常用的對元素物件後面通過點加屬性來事件繫結，如：
a.onclick = function(){
//code
}相信各位從程式碼裡能更深入的瞭解attachEvent和addEventListener的區別，在他們的方法裡，attachEvent的事件名是要加on字首的，而addEventListener的事件名不用加字首。在ie8和火狐下執行的時候能發現，attachEvent方法跳出順序是b到a，而火狐的與之相反。因為attachEvent是類似棧的先進後出，即第一個方法最後執行，而addEventListener是類似佇列的先進先出即第一個方法先執行。他與之對應的刪除繫結事件的方法用法如下：<!DOCTYPE html> <html> <head> <title></title> <meta charset = 'utf-8'> </head> <body> <button id = 'a'>aaa</button> <button id = 'b'>bbb</button> </body> <script> var a = document.getElementById('a') var b = document.getElementById('b') a.onclick = function() { alert('a') } a.onclick = function() { alert('a') } if(b.addEventListener) { b.addEventListener(click, function() { alert('a') }) b.addEventListener(click, function() { alert('b') }) } else { b.attachEvent(onclick, function() { alert('a') }) b.attachEvent(onclick, function() { alert('b') }) } </script> </html>
function myAddEvent (obj, ev, fn) { if (obj.addEventListener) { obj.addEventListener(ev, fn, false) } else { obj.attachEvent('on'+ev, fn) } } var a = document.getElementById('btn') var b= document.getElementById('btn1') myAddEvent(a, 'click', aa) myAddEvent(a, 'click', bb) function aa(){ alert('a') } function bb(){ alert('b') } b.onclick = function() { if(a.removeEventListener) a.removeEventListener('click', aa) else a.detachEvent('onclick',aa) }
那麼既然用a.onclick = function(){}方法不能解除繫結，那麼我們應該怎麼樣才能使得它能解除繫結呢？這裡介紹第四種繫結事件的方法，不過W3C標準已經不提倡使用，因為現在前端要求的是HTML和js程式碼要分離。第四種方法寫法如下：
<button id = 'a' onclick = 'ha()'>aaa</button>想要解除繫結則通過removeAttribute來將onclick這個屬性給去掉即可：
var a = document.getElementById('a') a.removeAttribute('onclick')