前兩節(jié)都和addEventListener的click有關(guān)，于是在想它與onclick有什么區(qū)別呢，自己調(diào)試了一下，網(wǎng)上也有相關(guān)資料

事件綁定

onclick綁定方式

優(yōu)點(diǎn)：?
- 簡潔?
- 處理事件的this關(guān)鍵字指向當(dāng)前元素?
缺點(diǎn)：?
- 不能對(duì)事件捕獲或事件冒泡進(jìn)行控制，只能使用事件冒泡，無法切換成事件捕獲?
- 一次只能對(duì)一個(gè)元素綁定一個(gè)事件處理程序，當(dāng)使用window.onload屬性時(shí)，會(huì)覆蓋采用相同方法所綁定的事件代碼

//this與event查一不大 推薦使用event對(duì)象 這樣你總是可以擁有全部的可用信息 dd.onclick = function(event){console.log(event.target.innerHTML);//event.target指向的是dd元素，以及他的所有信息console.log(this.innerHTML);//this也是指向dd元素，包含他的可用信息 }//注意：有時(shí)也會(huì)有需要使用this的情況 //當(dāng)需要鼠標(biāo)移入和移出的時(shí)候 event會(huì)觸發(fā)該事件每一個(gè)子元素 dd.onmouseover = function(event) {this.style.backgroundColor = "red";//不會(huì)改變子元素event.target.style.backgroundColor = 'red';//會(huì)改變子元素 }; dd.onmouseout = function(event) {this.style.backgroundColor = "green"event.target.style.backgroundColor="green" };

addEventListener綁定方式

優(yōu)點(diǎn)：?
- 可以支持事件處理的捕獲階段，也可以支持時(shí)間處理的冒泡階段，兩個(gè)階段都是通過addEventListener最后一個(gè)參數(shù)設(shè)置為false(默認(rèn)值，表示事件冒泡)或者true(表示事件捕獲)來切換?
- 事件處理 this與onclick一樣?
- 事件處理函數(shù)中，event對(duì)象總是作為第一個(gè)可用參數(shù)?
- 你可以為某個(gè)元素綁定多個(gè)事件而不會(huì)覆蓋之前綁定的處理程序 （按照順序執(zhí)行）?
缺點(diǎn)：?
- IE8以下不支持

dd.addEventListener('click',function(e){console.log(this.innerHTML);console.log( e.target.innerHTML ); },false);

demo如下

<input type="button" id="iS_addEventListener" value="addEventListener"> <input type="button" id="iS_onclick" value="onclick"><script type="text/javascript">(function(){document.getElementById("iS_addEventListener").addEventListener("click",function(){alert("我是addEventListener1");},false);document.getElementById("iS_addEventListener").addEventListener("click",function(){alert("我是addEventListener2");},false);//onclick是重新賦值，變量提升document.getElementById("iS_onclick").onclick = function() {alert("我是onclick1");}document.getElementById("iS_onclick").onclick = function() {alert("我是onclick2");}})();</script>

?結(jié)果是onclick只出現(xiàn)一次alert：我是click2【很正常第一次click事件會(huì)被第二次所覆蓋】，但是addEventListener卻可以先后運(yùn)行，不會(huì)被覆蓋【正如：它允許給一個(gè)事件注冊多個(gè)監(jiān)聽器。在使用DHTML庫或者 Mozilla extensions 這樣需要保證能夠和其他的庫或者差距并存的時(shí)候非常有用。】

解除事件綁定

對(duì)于onclick，直接?dd.onclick = null;

對(duì)于addEventListener則需要，oElement.removeEventListener(sEvent,fnHandler,false);

阻止事件冒泡

e.stopPropagation();?或?return false;

dd.onclick = function(e){console.log(e.target.innerHTML);this.style.color = 'red';//阻止事件冒泡 //防止點(diǎn)擊dd的時(shí)候隱藏了父級(jí)domClick e.stopPropagation(); //或 return false; }

區(qū)別：

return 可以同時(shí)阻止冒泡，且阻止事件的默認(rèn)行為>?
[比如a點(diǎn)擊鏈接時(shí)跳轉(zhuǎn)到百度,return false,便會(huì)阻止跳轉(zhuǎn)]

event.stopPropagation();?
阻止事件的進(jìn)一步傳播.(冒泡階段和捕獲階段)

?

更多專業(yè)前端知識(shí)，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的addEventListener的click和onclick的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。