HTML DOM Event 對象之(toElement、fromElement、event.srcElement、event.target)

http://www.w3school.com.cn/jsref/dom_obj_event.asp

http://blog.sina.com.cn/s/blog_9211608d01018mds.html

https://zhidao.baidu.com/question/753343911159507324.html

http://www.jb51.net/article/44571.htm

http://jsfiddle.net/kixi/u4aJh/

https://www.cnblogs.com/youxin/p/3372112.html

https://www.cnblogs.com/fullhouse/archive/2012/02/03/2337393.html

https://www.cnblogs.com/myblog1314/archive/2013/03/04/2943179.html

1. JS中event.srcElement和event.target的用法

JS中event.srcElement是IE中的用法,event.target是非IE中的用法

用法:obj = event.srcElement ? event.srcElement : event.target;

2. toElement和fromElement的用法

在IE中,當發生mouseover事件的時候,e.srcElement可以獲得鼠標移入的元素,e.fromElement可以獲得鼠標是從哪個元素移入的,e.toElement就是e.srcElement;

在IE中,當發生mouseout事件的時候,e.srcElement可以獲得鼠標移出的元素,e.fromElement和e.srcElement是一樣的,e.toElement可以獲得鼠標移動到當前的元素;

3.e.target來訪問,相關元素是通過e.relatedTarget
在DOM中,mouseover和mouseout所發生的元素可以通過e.target來訪問,相關元素是通過e.relatedTarget來訪問的(在mouseover中相當於IE的e.fromElement,在mouseout中相當於IE的e.toElement);

4.兼容寫法

如,下面是一個菜單列表中用到的程序:

$("childItems").οnmοuseοver=function(e){
  e=e||window.event;
  vartarget=e.target||e.srcElement;
  varrelatedTarget=e.relatedTarget||e.fromElement;
  if(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){
    clearTimeout(timeoutId);
    timeoutId=null;
  }
}
$("childItems").οnmοuseοut=function(e){
  e=e||window.event;
  vartarget=e.target||e.srcElement;
  varrelatedTarget=e.relatedTarget||e.toElement;
  if(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){//如果relatedTarget不是ul本身或者不是ul的子元素
    close();
  }  
}

5 event.target屬性(非IE)

event.target屬性的作用是獲取到觸發事件的元素。jQuery對其封裝後,避免了W3C、IE和safari瀏覽器不同標準的

$(“a’).click(function(event){
alert(event.target.href); //獲取觸發事件的a元素的href屬性值
alert(event.target.tagName); //獲取觸發事件的元素的標籤名稱
return false; //阻止鏈接跳轉})

6 W3C在mouseover和mouseout事件中添加了relatedTarget屬性(非IE)

在標準DOM中,mouseover和mouseout所發生的元素可以通過event.target()方法來訪問,相關元素是通過event.relatedTarget屬性來訪問的。event.relatedTarget屬性在mouseover中相當於IE瀏覽器的event.fromElement屬性,在mouseout中相當於IE瀏覽器的event.toElement,jQuery對其進行了封裝,使之能兼容各種瀏覽器。

W3C在mouseover和mouseout事件中添加了relatedTarget屬性。在mouseover事件中,它表示鼠標來自哪個元素,在mouseout事件中,它指向鼠標去往的那個元素。

而Microsoft添加了兩個屬性:
fromElement在mouseover事件中表示鼠標來自哪個元素。
toElement在mouseout事件中指向鼠標去往的那個元素。

例子:(跨瀏覽器的腳本)
如果你想知道鼠標來自哪個元素在mouseover事件中,你可以這樣寫:

function doSomething(e) {
  if (!e) var e = window.event;
  var relTarg = e.relatedTarget || e.fromElement;
}

如果你想知道鼠標去往哪個元素在mouseout事件中,你可以這樣寫:

function doSomething(e) {
  if (!e) var e = window.event;
  var relTarg = e.relatedTarget || e.toElement;
}

實踐例子:
http://jsfiddle.net/kixi/u4aJh/
http://blog.sina.com.cn/s/blog_9211608d01018mds.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章