事件委托
在js里常常听到事件委托，下面就我所理解的用自己的语言整理出来。
1：事件委托利用的是冒泡的原理，把事件添加到它对应的父级（or 父父级）上面，触发执行相应的效果
1.0：
<script> window.onload = function(){ var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); /*for(var i=0;i<aLi.length;i++){ aLi[i].onclick = function(){ alert(123); }; }*/ oUl.onclick = function(){ alert(123); }; }; </script> </head> <body> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </body> </html>
a:上述的代码比较简单，把原本遍历的li事件委托在他的父级上面,移入到li就会触发ul的事件。避免使用循环，提高页面性能。
1.1，如下代码：
window.onload = function(){ var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover = function(){ this.style.background = 'red'; }; aLi[i].onmouseout = function(){ this.style.background = ''; }; } }; </script> </head> <body> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </body> </html>
b:此时需要完成这样的效果，移入到每个li的时候改变它的背景色，此时如果笼统地直接把事件委托给父级ul是无法实现的，移入li都会变色。
c:要完成这个事件委托就要用到两个东西，事件源和当前事件源标签的名字：
可是事件源是什么东西呢？顾名思义，事件的源头，也就是当前操作的那个元素啦。
//ie : window.event.srcElement //事件源
标准下 ：event.target
//nodeName : 找到当前元素的标签名 //弹出的元素名都是大写
window.onload = function(){
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
};
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = '';
}
};
};
此时ul里的事件源有两个，分别是ul和li,要想只选定li，必须把上述代码作了一个判断，判断只当事件源的标签名与li相等时才触发。也就是只作用到自己所需要的元素上。
2：此时有一个需求，就是动态创建的子元素也需要具备相同元素的事件，拿li举例，如果想实现，利用li的for循环是无法成功的，
for循环的执行已经在新添加的事件之前结束了。此时利用事件委托就很好办了。
<script> window.onload = function(){ var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var oInput = document.getElementById('input1'); var iNow = 4; oUl.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background = 'red'; } }; oUl.onmouseout = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background = ''; } }; oInput.onclick = function(){ iNow++; var oLi = document.createElement('li'); oLi.innerHTML = 1111 * iNow; oUl.appendChild(oLi); }; }; </script> </head>
<body> <input type="button" value="添加" id="input1" /> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </body> </html>
a:当点击创建添加的时候追加到ul的里，此时新创建的的li就具备事件啦。
如有错误，欢迎指正，谢谢~
