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

1.on的用法：以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):

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

2.addEventListener的用法：

形式：

addEventListener(event,funtionName,useCapture)

引數：

• event:事件的型別如 “click”
• funtionName：方法名
• useCapture(可選)：布林值，指定事件是否在捕獲或冒泡階段執行。
• true - 事件控制代碼在捕獲階段執行
• false- false- 預設。事件控制代碼在冒泡階段執行

寫法：

第一種：

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

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

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

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

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

二.兩者的區別

1.on事件會被後面的on的事件覆蓋

以onclick為例：

//obj是一個dom物件，下同//註冊第一個點選事件
obj.onclick(function(){
alert("hello world");
});
//註冊第二個點選事件
obj.onclick(function(){
alert("hello world too");
});

最終會只有彈框輸出：

hello world too

2.addEventListener 則不會覆蓋。

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

這樣會連續輸出：

hello world
hello world too

三.addEventListener注意事項：

1.特別說明addEventListener不被IE9以下相容，IE9以下用使用attachEvent()

obj.attachEvent(event,funtionName);

引數：

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

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

四.事件集合：

1.滑鼠事件：

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

2.鍵盤事件：

• keydown(鍵按下)
• keypress(按鍵)
• keyup(鍵起來)
• 3.HTML事件：
• load（載入頁面）
• unload（解除安裝離開頁面）
• change（改變內容）
• scroll（滾動）
• focus（獲得焦點）
• blur（失去焦點）

五.總結：

onXXX與addEventListener都是為dom元素新增事件監聽，使其在事件發生後執行相應的程式碼，操作。有了它們我們實現了頁面與使用者互動。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。