事件委托与事件监听(皮毛)
事件监听
addEventListener() 或 attachEvent()
捕获阶段、目标阶段、冒泡阶段。
element.addEventListener(event, function, useCapture)
event : (必需)事件名,支持所有 DOM事件 。
function:(必需)指定要事件触发时执行的函数。
useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false。
IE标准:
element.attachEvent(event, function)
优点:
1、可以绑定多个事件。
2、可以解除相应的绑定
removeEventListener
封装事件监听
事件委托
事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果
document.onclick = function(event){
event = event || window.event;
vartarget = event.target || event.srcElement;
优点:
1、提高JavaScript性能
2、动态的添加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";
}
});