事件委托:
1、什么是事件委托: 什么是事件呢?onclick,onmouseover,onmouseout,onfocus等就是事件 什么是委托呢?就是自己做的事情委托给别人来做,也就是本来事件时加在自己身上,你却把事件加在别人身上,来解决这个事件
优点一:提高性能:
Demo1:
给每个li 绑定了一个鼠标经过事件
window.οnlοad=function(){ var oDemo = document.getElementById('ul'); var aLi = oDemo.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=""; } } }
上面案例反应一个问题,当我们在开发的时候for循环多个鼠标经过li出现的事件,会影响性能
下面我们就讲如何使用事件委托来解决问题:
注意: 这里涉及到事件源: 事件源是event对象下的,不管在那个事件中,只要你操作的那个元素就是事件源; IE : window.event.srcElement; 标准下 : event.target; nodeName: 元素的标签名;
oDemo.οnmοuseοver=function(ev){ var oEv = ev || window.event; var target = oEv.target || oEv.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background="red"; } } oDemo.οnmοuseοut=function(ev){ var oEv = ev || window.event; var target = oEv.target || oEv.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background=""; } }
优点二:新添加的元素 还有事件
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> body{ margin: 0; } </style> </head> <body> <button id="btn1">添加</button> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script>
window.οnlοad=function(){ var oDemo = document.getElementById('ul'); var aLi = oDemo.getElementsByTagName('li'); var oBtn = document.getElementById('btn1'); var iNow=5; oDemo.οnmοuseοver=function(ev){ var oEv = ev || window.event; var target = oEv.target || oEv.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background="red"; } } oDemo.οnmοuseοut=function(ev){ var oEv = ev || window.event; var target = oEv.target || oEv.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background=""; } } //新添加的元素 还有事件 oBtn.οnclick=function(){ iNow++; var oLi = document.createElement('li'); oLi.innerHTML=1 * iNow; oDemo.appendChild(oLi); } } </script> </body> </html>