事件委托
1. 什么是事件委托
利用冒泡的原理，将事件加到父级上，触发执行效果。
好处：1. 运用事件委托解决新添加元素的事件添加问题。通过事件委托提高JS执行性能。因为像例子中的li如果不断的添加，基数很大的话，再用for循环去实现，效果就不好了。
2.新添加的元素，还会有之前的事件
栗子1：让每个li点击的时候，弹出123,利用事件委托直接在li的父级元素ul上实现。这样就可以提高性能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <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>
栗子2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> //event对象：事件源：不管在那个事件中，只要你操作的那个元素就是事件源,也就是target或者是srcElement //ie : window.event.srcElement 标准下 ：event.target //nodeName : 找到当前元素的标签名 window.onload=function(){ var oUl=document.getElementById("ul1"); var oLi=oUl.getElementsByTagName("li"); oUl.onmouseover=function(ev){ var ev=ev ||window.event; var target = ev.target || ev.srcElement; if (target.nodeName.toLowerCase()=='li') {//因为target也包括父级元素ul,不希望父级元素,也显示红色。 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=''; } } } </script> </head> <body> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </body> </html>
栗子3：当要新添加元素的话，如果不用事件委托，用for循环。那么之前的鼠标移上去变红色这样的事件就不能实现了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload = function(){ var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var oInput = document.getElementById('input1'); var iNow = 4; for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover = function(){ this.style.background = 'red'; }; aLi[i].onmouseout = function(){ this.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>
栗子4：用事件委托后，新添加的元素，也会有原来的事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <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>
