江苏龙网

  1. 主页 > 生活百科 > >

带实例 详解JS中的事件机制( 三 )

JS

// 事件绑定function addEvent(element, eType, handle, bol) {if(element.addEventListener){//如果支持addEventListenerelement.addEventListener(eType, handle, bol);}else if(element.attachEvent){//如果支持attachEventelement.attachEvent("on"+eType, handle);}else{//否则使用兼容的onclick绑定element["on"+eType] = handle;}}// 事件解绑function removeEvent(element, eType, handle, bol) {if(element.addEventListener){element.removeEventListener(eType, handle, bol);}else if(element.attachEvent){element.detachEvent("on"+eType, handle);}else{element["on"+eType] = null;}}A.● 事件冒泡、事件捕获阻止：
event.stopPropagation( );// 阻止事件的进一步传播，包括（冒泡，捕获），无参数event.cancelBubble = true;// true 为阻止冒泡B.● 事件委托: 利用事件冒泡的特性，将里层的事件委托给外层事件，根据event对象的属性进行事件委托，改善性能 。使用事件委托能够避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上 。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件 。
来个例子吧，如果要单独点击table里面的td，普通做法是for循环给每个td绑定事件，td少的话性能什么差别，td如果多了，就不行了，我们使用事件委托:
<!-- HTML --><table id="out" border="1" style="cursor: pointer;"><tr><td>table01</td><td>table02</td><td>table03</td><td>table04</td><td>table05</td><td>table06</td><td>table07</td><td>table08</td><td>table09</td><td>table10</td></tr></table>var out = document.getElementById("out");if(out.addEventListener){out.addEventListener("click",function(e){var e = e||window.event;//IE没有e.target，有e.srcElementvar target = e.target||e.srcElement;//判断事件目标是否是td，是的话target即为目标节点tdif(target.tagName.toLowerCase()=="td"){changeStyle(target);console.log(target.innerHTML);}},false);}else{out.attachEvent("onclick",function(e){var e = e||window.event;//IE没有e.target，有e.srcElementvar target = e.target||e.srcElement;//判断事件目标是否是td，是的话target即为目标节点tdif(target.tagName.toLowerCase()=="td"){changeStyle(target);console.log(target.innerHTML);}});}; }; function changeStyle(ele){ele.innerHTML = "已点击"ele.style.background="#900";ele.style.color = "#fff"; }





推荐阅读


上一篇：滇红工夫红茶简介,白琳工夫红茶简介

下一篇：地产红茶没有参照标准,蜜香红茶简介