DOM事件中获取event对象的方法(IE下event是全局对象,FF下event是临时对象)
2017-04-05 23:57

Event对象的获取

有这么一个场景,我们给一个DOM元素绑定click事件,想要在click事件回调函数中使用event对象,那么我们就需要获取event对象。

第一种获取event对象的方式:

<div onclick='getEvent(event)'></div>
function getEvent(evt){
    var tg=evt.target||evt.srcElement;
}

通过这事件中传递“event”对象,注意只能写成”event“。这种写法在所有浏览器都兼容,但是处理方式上大不相同,在IE浏览器中,event对象是属于window对象的,所以这里传递的event,相当于传递了”window.event“。而在火狐浏览器中,event对象是事件现场生成的,名字也叫event,相当于FF的引擎在触发事件后生成一个event对象,然后运行getEvent函数,并将event对象传递进去的。

这是在DOM上通过onclick绑定的事件,我们同样也可以使用addEventListener和attachEvent来绑定事件。

第二种获取event对象的方法:

var dom=document.getElementById("tgwrapper");
if(window.addEventListener){
    dom.addEventListener("click",callback,false);
}else{
    dom.attachEvent("onclick",callback);
}
function callback(evt){
    var x=evt.clientX;
}

通过addEventListener或attachEvent绑定的回调中,在回调中书写上event对象,就可以使用了。这里event对象你可以随意起自己喜欢的名字,它只是作为形参显示的。可以叫evt,而不是必须是event。但是要记住,它是回调函数的第一个参数。

当然,下面这种写法也是一样的:

if(window.addEventListener){
    dom.addEventListener("click",function(evt){
        console.log(evt);
    },false);
}else{
    dom.attachEvent("onclick",function(evt){
        console.log(evt);
    });
}

第三种获取event对象的方法:

我们可能在dom元素上使用onclick=”xxx“的写法

var dom=document.getElementById("tgwrapper");
dom.onclick=function(evt){
    var evt=evt||window.event;
}

或者这样:

dom.onclick=getEvent;
function getEvent(evt){
   var evt=evt||window.event;
}

这种在js中通过onclick绑定的事件在火狐下会传递event临时对象,而IE下不会传递,要通过window.event来获取event对象。

第四种获取event对象的方法:

<div onclick='getEvent()'></div>
function getEvent(){
    var evt=window.event||arguments.callee.caller.arguments[0];
}

arguments.callee.caller.arguments[0]在火狐下获取event对象只能是在dom元素上书写的onclick事件中有效,在第二种,第三种事件绑定方法中是无效的。二,三种方法需要通过传递的event对象来获取。只有这种DOM元素上绑定的事件,是由这个DOM元素的onclick方法调用这个回调的,其他绑定方法是直接调用回调的。arguments.callee是代表getEvent函数,caller是代表调用它的onclick函数,arguments[0]是表示调用它的onclick方法的第一个参数,火狐会给他传递临时的event对象的。注意一点,arguments对象在严格模式下的js中是不可用的,所以,尽量避免采用第四种方式来获取火狐下event对象。还得说IE够哥们,获取event对象永远那么简单,它是一个全局对象,想什么时候用,什么时候拿来用就可以。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(834)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1