JavaScript之onXXXX事件和addEventListener的區別

1.首先介紹兩者的用法：

1.1onXXXX的用法：以onclick為例

第一種：

obj.onclick = function(){
//do something..
}

第二種：

obj.onclick= fn;
function fn (){
//do something...
}

第三種：當函數fn有參數的情況下使用 匿名函數來傳參：

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

不能夠這樣寫:錯誤寫法：obj.onclick= fn(param):

因為這樣寫函數會立即執行，不會等待點擊觸發， 特別注意一下

 

1.2addEventListener的用法：

形式：addEventListener(event,funtionName,useCapture)

參數：

event:事件的類型如 “click”

funtionName：方法名

useCapture(可選)：布爾值，指定事件是否在捕獲或冒泡階段執行。

• • true - 事件句柄在捕獲階段執行
  • false- false- 默認。事件句柄在冒泡階段執行

寫法：

第一種：

obj.addEventListener("click",function(){
//do something
}));

第二種，沒參數可以直接寫函數名

obj.addEventListener("click",fn,fasle));
funciton fn(){
//do something..
}

第三種：函數有參數時需要使用匿名函數來傳遞參數

obj.addEventListener("click",function(){fn()parm},false);

 

 

 

2.兩者的區別

2.1onxxxx事件會被后面的onxxxx相同的事件覆蓋

以onclick為例：

//注冊第一個點擊事件
obj.onclick(function(){
alert("hello world");
});
//注冊第二個點擊事件
obj.onclick(function(){
alert("hello world too");
});

最終會只有彈框輸出：

hello world too

 

2.2addEventListener 則不會覆蓋。

//注冊第一個點擊事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注冊第二個點擊事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

這樣會連續輸出：

hello world

hello world too

 

3.addEventListener注意事項：

特別說明addEventListener不被 IE9以下兼容，IE9以下用使用 addEvent()；

obj.addEvent(event,funtionName);

參數：

event:事件類型（需要寫成“onclick”前面加on，這個與addEventListener不同）

funtionName:方法名（要參數是也是需要使用匿名函數來傳參）

 

4.奉上事件集合：

1.鼠標事件：

• click(單擊)
• dbclick(雙擊)
• mousedown(鼠標按下)
• mouseout(鼠標移走) 
• mouseover(鼠標移入)
• mouseup(鼠標彈起)
• mousemove(鼠標移動)

2.鍵盤事件：

• keydown(鍵按下)
• keypress(按鍵)
• keyup(鍵起來)

3.HTML事件：

• load（加載頁面） 
• unload（卸載）
• change（改變）
• scroll（滾動）  
• focus（獲得焦點）
• blur（失去焦點）

5.總結：

onXXX與addEventListener都是為dom元素添加事件監聽，使其在事件發生后執行相應的代碼，操作。有了它們我們實現了頁面與用戶交互。

 

作者：Ry-yuan（元）

本文是個人總結得出，若有錯誤請指出。

原文地址： http://www.cnblogs.com/Ry-yuan/p/6864132.html