HTML DOM Event 对象之(toElement、fromElement、event.srcElement、event.target)
来源:互联网 发布:淘宝变形金刚玩具 编辑:程序博客网 时间:2024/06/10 23:39
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").onmouseover=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").onmouseout=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
- HTML DOM Event 对象之(toElement、fromElement、event.srcElement、event.target)
- event.srcElement ,event.fromElement,event.toElement兼容问题
- FF下新增event对象的srcElement、fromElement、toElement三个属性
- event.srcElement event.target
- 创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性
- 创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性
- event.srcElement 与event.target
- event.srcElement 和 event.target
- event.srcElement 与event.target
- event.srcElement和event.target
- event.srcElement和event.target
- event.srcElement与event.target
- event.srcelement event.target属性
- HTML DOM Event 对象(Event 对象)
- HTML DOM Event 对象
- HTML DOM Event 对象
- HTML DOM Event 对象
- HTML DOM Event 对象
- 解决WordPress项目添加插件需要ftp账号验证
- C++和java中垃圾回收机制的浅浅理解
- VC++深入详解(孙鑫著)之MFC读书笔记一.2017.12.15
- 使用MyBatis Generator自动创建代码
- java入门学习
- HTML DOM Event 对象之(toElement、fromElement、event.srcElement、event.target)
- jtopo 比例尺功能
- 机器学习框架xr-learn: decisionTree(决策树)
- ORA-12514: TNS:listener does not currently know of service requested in connect descriptor 的解决办法
- 基于互信息和左右信息熵的短语提取识别
- 钛极OS(TiJOS)物联网操作系统之小试牛刀(4)——温湿度
- 二十四、返回函数
- JS,全局变量,ajax中赋值,在其他闭包里没有拿到值
- Linux下pwn从入门到放弃