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

1.on的用法：以onclick為例

第一種：

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

第二種：

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

第三種：當(dāng)函數(shù)fn有參數(shù)的情況下使用匿名函數(shù)來傳參：

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

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

因為這樣寫函數(shù)會立即執(zhí)行，不會等待點擊觸發(fā)，特別注意一下

2.addEventListener的用法：

形式：

addEventListener(event,funtionName,useCapture)

參數(shù)：

event:事件的類型如 “click” funtionName：方法名 useCapture(可選)：布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行。 true - 事件句柄在捕獲階段執(zhí)行 false- false- 默認。事件句柄在冒泡階段執(zhí)行

寫法：

第一種：

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

第二種，沒參數(shù)可以直接寫函數(shù)名

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

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

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

二.兩者的區(qū)別

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');}));

這樣會連續(xù)輸出：

hello worldhello world too

三.addEventListener注意事項：

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

obj.attachEvent(event,funtionName);

參數(shù)：

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

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

四.事件集合：

1.鼠標(biāo)事件：

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

2.鍵盤事件：

keydown(鍵按下) keypress(按鍵) keyup(鍵起來) 3.HTML事件： load（加載頁面） unload（卸載離開頁面） change（改變內(nèi)容） scroll（滾動） focus（獲得焦點） blur（失去焦點）

五.總結(jié)：

onXXX與addEventListener都是為dom元素添加事件監(jiān)聽，使其在事件發(fā)生后執(zhí)行相應(yīng)的代碼，操作。有了它們我們實現(xiàn)了頁面與用戶交互。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。