我們在學習的時候，最初接觸的事件繫結方式大多是傳統事件繫結方法。傳統事件繫結方法事例如下：
window.
οnlοad
=function()
document.
getelementbyid
("btn").
οnclick
=function()
document.
οnmοusemοve
=function()
1234
5678
9
事件名稱之間一定要加上on，比如：onclick、onload、onmousemove。
相容主流的瀏覽器，包括低版本的ie。
當同乙個元素繫結多個事件時，只有最後乙個事件會被新增，並且傳播模式只能是冒泡模式。
方法事例：
window.
addeventlistener
('load'
,init,
false);
function
init()
// 下面寫法與上面等價
window.
addeventlistener
('load'
,function()
,false);
1234
5678
addeventlistener()方法特點：
element.addeventlistener(event, function, usecapture)中的第三個引數可以控制指定事件是否在捕獲或冒泡階段執行。true - 事件控制代碼在捕獲階段執行。false- 預設- 事件控制代碼在冒泡階段執行。
addeventlistener() 可以給同乙個元素繫結多個事件，不會發生覆蓋的情況。如果給同乙個元素繫結多個事件，那麼採用先繫結先執行的規則。
addeventlistener() 在繫結事件的時候，事件名稱之前不需帶 on 。
注意該方法的相容性，如果要相容 ie6-8 ，不能使用該方法，可以採用以下方法。
可以使用 removeeventlistener() 來移除之前繫結過的事件。
// 向
元素新增事件控制代碼
document.
getelementbyid
("mydiv").
addeventlistener
("mousemove"
, myfunction)
;// 移除 元素的事件控制代碼
document.
getelementbyid
("mydiv").
removeeventlistener
("mousemove"
, myfunction);1
2345
window.
attachevent
('onload'
,function()
);12
3
attachevent是 ie 有的方法，它不遵循w3c標準，而其他的主流瀏覽器如ff等遵循w3c標準的瀏覽器都使用addeventlistener，所以實際開發中需分開處理。
attachevent()是 後繫結先執行。
繫結時間時，attachevent必須帶 on，如 onclick，onmouseover 等
原生js中的事件監聽方法
好久沒有使用過原生js中的監聽方法，竟然發現有些陌生，幾個方法之間的區別也有些混亂了。不過看過了api文件，又將他們之間的區別和用法理清楚了，這裡進行總結。一 傳統事件繫結方法window.onload function document.getelementbyid btn onclick fun...
原生js事件委託
之前面試的時候就被問過，什麼是事件委託？事件委託 給父元素繫結事件，用來監聽子元素的冒泡事件。也就是事件目標 子元素 不處理事件，把事件委託給父元素去處理。看下圖理解事件冒泡 事件委託的好處 不需要對每乙個子元素繫結事件，只需要在父元素上繫結事件，減少了操作dom節點的次數，從而減少瀏覽器的重載入，...
對於原生js中的事件委託解析
在日常中，我們可能會聽到事件委託這樣的概念，有些同學可能對事件委託已經很了解了，也有些同學可能只是聽過事件委託，只是會簡單的使用，但是對於事件委託的原理不怎麼知道。所以該博文會解釋一下原生js的事件委託的原理，為什麼會有事件委託，為什麼可以這樣用事件委託等等問題。在解析事件委託之前，我們先回顧一下j...