javascript中Dom事件的srcTarget,strElement详解

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

我们知道在Javascript中，可以使用事件处理函数来监听事件，在事件处理函数中，我们可以通过当前的事件对象(IE: window.event ; firefox parameter event)来获取到事件发生的对象。比如，在IE中

我们知道在Javascript中，可以使用事件处理函数来监听事件，在事件处理函数中，我们可以通过当前的事件对象(IE: window.event ; firefox parameter event)来获取到事件发生的对象。

比如，在IE中

function eventHandler = function(e){

var ev = e || window.event ; //window.event for IE, para e for ff

var el = evt.srcTarget || evt.srcElement; // compatible with IE

//then el is the target which cause the event <image src="1.jpg" />

代码如下

function ImageChange(evt)
{
只对IE有效:
var eventName=event.type; //事件的类型
var srcElement=event.srcElement; //产生事件的DOM对象
if(eventName=="mouseout")
{
srcElement.src="1.jpg";
}

if(eventName=="mouseover")
{
srcElement.src="2.jpg";
}

通用(一般浏览器都支持)

代码如下

var eventName;
var element;
if(evt.target) //非IE
{
element=evt.target;                    //返回触发此事件的元素,不支持IE    eventName=evt.type;                  //返回当前 Event 对象表示的事件的名称,如:click,mouseover,mouseout
}else    //IE
{
element=event.srcElement;         //返回触发此事件的元素,只支持IE    eventName=event.type;             //返回当前 Event 对象表示的事件的名称,如:click,mouseover,mouseout
}

if(eventName=="mouseout")
{
element.src="1.jpg";
}

if(eventName=="mouseover")
{
element.src="2.jpg";
}
}
</script>

那么，JS内部是如何通过event获取到srcTarget呢？一直以来，我以为srcTarget会保留一个到事件发生对象的引用，但今天遇到的一个问题，让我改变了看法：一个Div，上面有个blur时间，当失去焦点的时候就会display=none, Div中包含几个<a>标签，在这些标签上监听了click事件。

问题出现了，因为当你click一个A的时候，blur时间被触发了，那么这个DIV就display none了，紧接着click事件被触发，问题就是，这个时候，在click函数中，取不到正确的srcTarget了。

经过一番折腾，最后使用了个比较hacker的方法来解决，就是在blur事件函数中，这样：

setTimeout(function(){div.style.display=’none’;}, 100);

回头来想，我猜测，Javascript中的srcElement的获取机制如下：

事件发生时，event对象记录事件的鼠标坐标，但并不记录发生事件对象的引用，只有当你去获取srcTarget的时候，JS解释器，会根据event的鼠标坐标去获取该坐标的元素。