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

1.on的用法：以onclick為例

第一種：

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

第二種：

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

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

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

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

因?yàn)檫@樣寫(xiě)函數(shù)會(huì)立即執(zhí)行，不會(huì)等待點(diǎn)擊觸發(fā)，特別注意一下

2.addEventListener的用法：

形式：

addEventListener(event,funtionName,useCapture)

參數(shù)：

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

寫(xiě)法：

第一種：

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

第二種，沒(méi)參數(shù)可以直接寫(xiě)函數(shù)名

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

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

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

二.兩者的區(qū)別

1.on事件會(huì)被后面的on的事件覆蓋

以onclick為例：

//obj是一個(gè)dom對(duì)象，下同//注冊(cè)第一個(gè)點(diǎn)擊事件
obj.onclick(function(){
alert("hello world");
});
//注冊(cè)第二個(gè)點(diǎn)擊事件
obj.onclick(function(){
alert("hello world too");
});

最終會(huì)只有彈框輸出：

hello world too

2.addEventListener 則不會(huì)覆蓋。

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

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

hello world
hello world too

三.addEventListener注意事項(xiàng)：

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

obj.attachEvent(event,funtionName);

參數(shù)：

event:事件類(lèi)型（需要寫(xiě)成“onclick”前面加on，這個(gè)與addEventListener不同）

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

四.事件集合：

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

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

2.鍵盤(pán)事件：

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

五.總結(jié)：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論