js事件处理程序总结笔记来了
首先,为什么要用事件委托,用一段代码解释下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM</title> <style type="text/css"> #con li{ width: 100px; height: 50px; background-color: #1F747C; border-bottom: 1px solid #ccc; } </style> </head> <body> <div> <ul id="con"> <li id="list1">哈哈</li> <li id="list2">洗洗</li> <li id="list3">水水</li> </ul> </div> </body> </html>
如上面代码,如果要添加事件处理程序,我们一般做法是,给list1、list2、list3这个3个li元素分别添加事件处理程序,但是有没有想过,如果元素很多呢,我们还是一直用这样的方法添加吗?当然是不可能的,这样子,非累死程序员不可
这个时候事件委托就出现了,神一般的存在,解决了这一问题。
事件委托:利用事件冒泡这一特性,指定一个事件处理程序,管理这一类的所有事件,在他的父元素或更高元素设置事件处理程序,将子元素事件委托给父元素事件。达到省时省力的效果。
接下来用代码说明怎样使用事件委托
html代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM</title> <script type="text/javascript" src="event.js"></script> <script type="text/javascript" src="deal.js"></script> <style type="text/css"> #con li{ width: 100px; height: 50px; background-color: #1F747C; border-bottom: 1px solid #ccc; } </style> </head> <body> <div> <ul id="con"> <li class="list">哈哈</li> <li class="list">洗洗</li> <li class="list">水水</li> </ul> </div> </body> </html>
event.js代码:
/** * Created by ys on 2015/5/11. */ //跨浏览器的事件处理程序 //调用时候直接用domEvent.addEvent( , , );直接调用 //使用时候,先用addEvent添加事件,然后在handleFun里面直接写其他函数方法,如getEvent; //addEventListener和attachEvent---都是dom2级事件处理程序 var domEvent = { //element:dom对象,event:待处理的事件,handleFun:处理函数 //事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等 addEvent:function(element,event,handleFun){ //addEventListener----应用于mozilla if(element.addEventListener){ element.addEventListener(event,handleFun,false); }//attachEvent----应用于IE else if(element.attachEvent){ element.attachEvent("on"+event,handleFun); }//其他的选择dom0级事件处理程序 else{ //element.onclick===element["on"+event]; element["on"+event] = handleFun; } }, //事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等 removeEvent:function(element,event,handleFun){ //removeEventListener----应用于mozilla if (element.removeEventListener) { element.removeEventListener(event,handleFun,false); }//detachEvent----应用于IE else if (element.detachEvent) { element.detachEvent("on"+event,handleFun); }//其他的选择dom0级事件处理程序 else { element["on"+event] = null; } }, //阻止事件冒泡 stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true;//IE阻止事件冒泡,true代表阻止 } }, //阻止事件默认行为 preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false;//IE阻止事件冒泡,false代表阻止 } }, //获得事件元素 //event.target--非IE //event.srcElement--IE getElement:function(event){ return event.target || event.srcElement; }, //获得事件 getEvent:function(event){ return event? event : window.event; }, //获得事件类型 getType:function(event){ return event.type; } };
/** * Created by ys on 2015/5/11. */ window.onload = function(){ var ulList = document.getElementById('con'); domEvent.addEvent(ulList,'click',function(event){ event = domEvent.getEvent(event); var target = domEvent.getElement(event); switch (target.className){ case 'list': alert('点击了我'); break; } }); };接下来,几时测试时间了,我分别在IE7以上,chrome,firefox都测试过,可以