自然,我们都习惯了 IE,在 IE 中要在函数中获得各事件对象很容易,直接用 event、event.srcElemtn、event.fromElement、event.toElement 就行了。在 FireFox 中获得触发事件的元素可以用 event.target,但其他两个 fromElement 和 toElement 就要费些周折。

 

1、event.srcElement :当前事件的源

   var obj = event.srcElement ? event.srcElement : event.target; //FF只能识别event.target
 
2、event.fromElement、event.toElement
   
  1. <script language="javascript">
  2. //addEventListener是为一个事件添加一个监听,使用方法见http://cindylu520.iteye.com/admin/blogs/588652
  3. //此处if判断是否是火狐浏览器
  4. if(window.addEventListener) { FixPrototypeForGecko(); }
  5. function  FixPrototypeForGecko()
  6. {
  7. //prototype属性允许你向一个对象添加属性和方法
  8. //__defineGetter__和__defineSetter__是Firefox的特有方法,可以利用来它自定义对象的方法。
  9. //使用方法见:http://cindylu520.iteye.com/admin/blogs/588667
  10. //runtimeStyle   运行时的样式!如果与style的属性重叠,将覆盖style的属性!
  11. HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);
  12. //代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。
  13. window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);
  14. //event.srcElement当前事件的源,IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
  15. Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);
  16. //当前事件有移动成分时,如onmouseover、onmouseout等fromElement、toElement表示移动事件的两个端点
  17. Event.prototype.__defineGetter__("fromElement",  element_prototype_get_fromElement);
  18. Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement);
  19. }
  20. function  element_prototype_get_runtimeStyle() { return  this.style; }
  21. function  window_prototype_get_event() { return  SearchEvent(); }
  22. function  event_prototype_get_srcElement() { return  this.target; }
  23. function element_prototype_get_fromElement() {
  24. var node;
  25. //relatedTarget 事件属性返回与事件的目标节点相关的节点。
  26. //对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。
  27. //对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
  28. //对于其他类型的事件来说,这个属性没有用。
  29. //详情:http://cindylu520.iteye.com/admin/blogs/588678
  30. if(this.type == "mouseover") node = this.relatedTarget;
  31. else if (this.type == "mouseout") node = this.target;
  32. if(!node) return;
  33. while (node.nodeType != 1)
  34. node = node.parentNode;
  35. return node;
  36. }
  37. function  element_prototype_get_toElement() {
  38. var node;
  39. if(this.type == "mouseout")  node = this.relatedTarget;
  40. else if (this.type == "mouseover") node = this.target;
  41. if(!node) return;
  42. while (node.nodeType != 1)
  43. node = node.parentNode;
  44. return node;
  45. }
  46. function  SearchEvent()
  47. {
  48. if(document.all) return  window.event;
  49. func = SearchEvent.caller;
  50. while(func!=null){
  51. var  arg0=func.arguments[0];
  52. if(arg0 instanceof Event) {
  53. return  arg0;
  54. }
  55. func=func.caller;
  56. }
  57. return   null;
  58. }
  59. </script>

好了,现在不管是在 IE 中还是在 FireFox 中,触发事件后都有了 event、event.srcElement、event.fromElement、event.toElement 属性了。这就来做个测试吧:

Java代码  
  1. <script>
  2. function test(){
  3. alert("event:" + event +", srcElement:"+event.srcElement.innerHTML+
  4. ", fromElement:"+event.fromElement.innerHTML + ", toElement:"+event.toElement.innerHTML)
  5. }
  6. </script>
  7. <button onmouseout="test()">MouseOut</button><button onmouseover="test()">MouseOver</button>

页面中有两个按钮 MouseOut 和 MouseOver,你掠过第一个按钮到第二个按钮上是,有看到这样内容的窗口:

从上图可以看出,其实我是在 Google 的 Chrome 浏览器中作的测试,也是有效的。标题虽说是兼容 IE 和 FireFox,但宽松点说就是 IE  和非 IE,因为 IE 总喜欢剑起偏锋,不按规范办事,不过这种事在 IE 8 中是收敛了许多。

event.srcElement ,event.fromElement,event.toElement的更多相关文章

  1. Javascript中event.srcElement和event.target的区别

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...

  2. js的event.srcElement与event.target(触发事件对象)

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  3. event.srcElement 用法笔记e.target

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称. 注意获取的标记都以大写表示,如"TD",&q ...

  4. event.srcElement兼容处理

    在IE下,event对象有srcElement属性,但是没有target属性:Firefox下,even对象有target属性,但是没有srcElement属性.. 解决方法:使用obj(obj = ...

  5. event.srcElement与event.target的区别

    window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为 ...

  6. 浏览器中event.srcElement和event.target的兼容性问题

    在IE下,event对象有srcElement属性,但是没有target属性:Firefox下,even对象有target属性,但是没有srcElement属性.. 解决方法:使用obj(obj = ...

  7. e.target和e.event和event.srcElement

    e.target 是目标对象,e.event是目标所发生的事件,event.srcElement捕获当前事件作用的对象 1. $(function(){ $("li:has(ul)" ...

  8. JS基础篇--JS的event.srcElement与event.target(触发事件对象)

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  9. window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取,window.event与时间函数参数的event是同一个 事件对象

    判断事件触发的元素:     var tag = window.event.target || window.event.srcElement;    if (tag.tagName.toLowerC ...

随机推荐

  1. 工业串口和网络软件通讯平台(SuperIO 2.0)发布

    下载:SuperIO 2.0(开发手册.Demo.组件包) 官网:进入 交流群:54256083 SuperIO 2.0版本正式发布.把SCL正式更改名称为SuperIO. 一.此次升级主要包括两个方 ...

  2. (原) 2.3 Curator使用

    本文为原创文章,转载请注明出处,谢谢 Curator使用 1.jar包引入,演示版本为2.6.0,非maven项目,可以下载jar包导入到项目中 <dependency> <grou ...

  3. CSS项目学习总结

    1.我过去在HTML和CSS阶段是如何学习的? 我一开始学HTML和CSS,更多的是通过看视频.书籍,一个知识点一个知识点地去学习,很少把他们串联起来,看代码多于敲代码. 然而,通过现在这几个项目的实 ...

  4. 如何合理优化WEB前端 高效提升WEB前端性能

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  5. iOS之There was an internal API error错误

    There was an internal API error. 错误原因:把Product Name作为程序名称,程序名称错乱 解决方法:检查Product Name, 不要包含中文以及特殊字符.在 ...

  6. cordova for ios: Unable to simultaneously satisfy constraints.

    使用cordova开发ios项目的时候,在上传图片碰到一个问题.使用html的<input type="file"/>标签来选择照片或者拍照片,引起了布局报错,然后图片 ...

  7. React Native知识2-Text组件

    Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...

  8. Html--表单练习

          <!--文档定义一定要带上,因为浏览器在解析的时候先按照文档定义的格式解析,   如果没有就按照浏览器默认的格式解析,可能会出问题.-->   <html>   & ...

  9. Linux mysql 5.6: ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    案例环境: 操作系统 :Red Hat Enterprise Linux Server release 5.7 (Tikanga) 64 bit 数据库版本 : Mysql 5.6.19 64 bit ...

  10. 深入解析Windows操作系统笔记——CH2系统结构

    2.系统结构 本章主要介绍系统的总体结构,关键部件之间的交互,以及运行在什么环境. 2.系统结构 2.1 需求和设计目标 2.2 操作系统模型 2.3 总体结构 2.3.1 可移植性 2.3.2 对称 ...