夏日博客

A-A+

javascript中Dom事件的srcTarget,strElement详解

2016年01月15日 前端设计 暂无评论 阅读 6 views 次

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

  1. function eventHandler = function(e){  
  2. var ev = e || window.event ; //window.event for IE, para e for ff  
  3. var el = evt.srcTarget || evt.srcElement; // compatible with IE  
  4. //then el is the target which cause the event <image src="1.jpg" />      
  5.   
  6. <Script type="text/javascript">  
  7.  function ImageChange(evt)  
  8. {  

只对IE有效:

  1. var eventName=event.type;           //事件的类型  
  2. var srcElement=event.srcElement;  //产生事件的DOM对象  
  3. if(eventName=="mouseout")  
  4. {  
  5.  srcElement.src="1.jpg";  
  6. }  
  7. if(eventName=="mouseover")  
  8. {  
  9.  srcElement.src="2.jpg";  
  10. }  

通用(一般浏览器都支持),代码如下:

  1. var eventName;     
  2. var element;     
  3. if(evt.target) //非IE     
  4. {      
  5. element=evt.target;                    //返回触发此事件的元素,不支持IE    eventName=evt.type;                  //返回当前 Event 对象表示的事件的名称,如:click,mouseover,mouseout     
  6. }else    //IE     
  7. {      
  8. element=event.srcElement;         //返回触发此事件的元素,只支持IE    eventName=event.type;             //返回当前 Event 对象表示的事件的名称,如:click,mouseover,mouseout     
  9. }     
  10.     
  11. if(eventName=="mouseout")  
  12. {  
  13.  element.src="1.jpg";  
  14. }  
  15.     
  16. if(eventName=="mouseover")  
  17. {  
  18.  element.src="2.jpg";   
  19. }  
  20. }   
  21. </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的鼠标坐标去获取该坐标的元素。

标签：

给我留言