事件委托:
就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
原理(借鉴):
事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
eg:实现多个li点击变色
js代码:
var oUl=document.getElementById('ul1');
oUl.onclick=function(ev){
var oEvent=ev||event;
console.log(oEvent.srcElement);
console.log(oEvent.target);
var oSrc=oEvent.srcElement||oEvent.target;
if(oSrc.tagName=='LI'){//标签名大写
oSrc.style.background='red';
}
};
布局:
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>