标签:
一、事件的添加和删除
不同浏览器,不同DOM级别,添加和删除事件的方法也不同,具体可以参见后面的EventUtil元素。
二、事件对象
在事件处理程序中,浏览器会为之传入一个event对象,该对象的常用属性和方法如下:
type:触发的事件类型,如click,keypress等
target:事件的目标
currentTarget:事件处理程序当前正在处理事件的那个元素
在事件处理程序内部,this始终等于curentTarget的值,如果事件处理程序直接赋给了目标元素,那么这三个值是相等的。但是,如果事件处理程序是注册到父节点上,那么this和currentTarge则等于父节点,而target则等于实际发生事件的子节点元素。
eventPhase:事件发生到哪个阶段:0事件捕获阶段,1事件处于目标对象上,2冒泡阶段。
常用方法:
preventDefault()取消事件的默认行为
stopPropagation()取消事件冒泡
不同浏览器对上述对象和方法的调用也存在一定差异,因此,下列代码实现了一个跨浏览器的EventUtil对象。
//事件的添加和删除 var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } }, getEvent:function(event){ return event?event:window.event; }, getTarget:function(event){ return event.target?event.target:event.srcElement; }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } };
标签:
原文地址:http://www.cnblogs.com/bobodeboke/p/4666857.html