html事件处理程序中,变量event中保存着事件对象
<button onclick="alert(ev.type)" id="btn">click</button>
1、DOM中的事件对象
无论是DOM0还是DOM2,事件处理程序中都会传入一个event对象
var btn=document.getElementById("btn"); btn.onclick=function(){ alert(1); } btn.addEventListener("click",function(ev){ alert(ev.type); },false);
所有的事件都会有下表列出的成员:
在事件处理程序内部,对象this始终等于currentTarget的值,而target是事件实际目标
stopPropagation用于立即停止事件在DOM层中的传播:
var btn=document.getElementById("btn"); btn.onclick=function(event){ alert("btn"); event.stopPropagation(); } document.body.onclick=function(event){ alert("body");//不会执行 }
2、IE中的事件对象
访问IE中的event对象的方式取决于指定事件处理程序的方法
2.1、DOM0级:
IE8-浏览器不识别传入的event对象,需要在事件处理函数内部声明
var btn=document.getElementById("btn"); btn.onclick=function(event){ alert(window.event.type); }
IE9+浏览器以及其他高级浏览器则是两种方式都支持
2.2、attachEvent:
支持传入event参数
所有的事件都会有下表列出的成员:
this不一定指向目标元素,也可能指向全局(attachEvent),故用event.srcElement比较保险
兼容浏览器的事件处理对象:
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.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; } } }
时间: 2024-11-09 01:01:18