A-A+

javascript中Dom事件的srcTarget,strElement详解

2016年01月15日 web前端设计 暂无评论 阅读 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的鼠标坐标去获取该坐标的元素。

标签:

给我留言