事件委托與事件監(jiān)聽(皮毛)

事件監(jiān)聽

addEventListener() 或 attachEvent()?

捕獲階段、目標階段、冒泡階段。

element.addEventListener(event, function, useCapture)

event : (必需)事件名,支持所有 DOM事件 。

function:(必需)指定要事件觸發(fā)時執(zhí)行的函數(shù)。

useCapture:(可選)指定事件是否在捕獲或冒泡階段執(zhí)行。true,捕獲。false,冒泡。默認false。

IE標準:

element.attachEvent(event, function)

優(yōu)點:

1、可以綁定多個事件。

2、可以解除相應的綁定

removeEventListener

封裝事件監(jiān)聽

事件委托

事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,觸發(fā)執(zhí)行效果

document.onclick = function(event){

?event = event || window.event;

?vartarget = event.target || event.srcElement;

優(yōu)點:

1、提高JavaScript性能

2、動態(tài)的添加DOM元素,不需要因為元素的改動而修改事件綁定。


注意 :li在js里面應該寫成LI


代碼:

document.addEventListener("click",function(event){

? ? ?var target=event.target;

? ? ?if (target.nodeName=="LI") {

? ? ? ? ? ? var he = target.parentNode.parentNode.childNodes;

? ? ? ? ? ? for (var i=0; i<he.length; i++){

? ? ? ? ? ? ????he[i].className="text1";

? ? ? ?????}

? ? ? ?????target.parentNode.className="text";

? ? }

? ?});

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容