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

創(chuàng)新互聯(lián)服務(wù)項目包括方山網(wǎng)站建設(shè)、方山網(wǎng)站制作、方山網(wǎng)頁制作以及方山網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，方山網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到方山省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

1.on的用法：以onclick為例

第一種：

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

第二種：

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

第三種：當函數(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 world
hello world too

三.addEventListener注意事項：

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

obj.attachEvent(event,funtionName);

參數(shù)：

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

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

四.事件集合：

1.鼠標事件：

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

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)了頁面與用戶交互。

相關(guān)學習推薦：javascript視頻教程

本文標題：解析Json及addEventListener原理用法的區(qū)別
網(wǎng)頁路徑：http://chinadenli.net/article6/cjeoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、用戶體驗、品牌網(wǎng)站設(shè)計、網(wǎng)站策劃、虛擬主機、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)