自然，我们都习惯了 IE，在 IE 中要在函数中获得各事件对象很容易，直接用 event、event.srcElemtn、event.fromElement、event.toElement 就行了。在 FireFox 中获得触发事件的元素可以用 event.target，但其他两个 fromElement 和 toElement 就要费些周折。
所以，为了保持一致的使用方式，也为了保持原有的使用习惯，我们加入以下 JS 代码(代码有些紧凑，未加注释，应该很好理解)：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script language="javascript"> if(window.addEventListener) { FixPrototypeForGecko(); } function FixPrototypeForGecko() { HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle); window.constructor.prototype.__defineGetter__("event",window_prototype_get_event); Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement); Event.prototype.__defineGetter__("fromElement", element_prototype_get_fromElement); Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement); } function element_prototype_get_runtimeStyle() { return this.style; } function window_prototype_get_event() { return SearchEvent(); } function event_prototype_get_srcElement() { return this.target; } function element_prototype_get_fromElement() { var node; if(this.type == "mouseover") node = this.relatedTarget; else if (this.type == "mouseout") node = this.target; if(!node) return; while (node.nodeType != 1) node = node.parentNode; return node; } function element_prototype_get_toElement() { var node; if(this.type == "mouseout") node = this.relatedTarget; else if (this.type == "mouseover") node = this.target; if(!node) return; while (node.nodeType != 1) node = node.parentNode; return node; } function SearchEvent() { if(document.all) return window.event; func = SearchEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0 instanceof Event) { return arg0; } func=func.caller; } return null; } </script> |
好了，现在不管是在 IE 中还是在 FireFox 中，触发事件后都有了 event、event.srcElement、event.fromElement、event.toElement 属性了。这就来做个测试吧：
|
1 2 3 4 5 6 7 8 |
<script> function test(){ alert("event:" + event +", srcElement:"+event.srcElement.innerHTML+ ", fromElement:"+event.fromElement.innerHTML + ", toElement:"+event.toElement.innerHTML) } </script> <button onmouseout="test()">MouseOut</button><button onmouseover="test()">MouseOver</button> |
页面中有两个按钮 MouseOut 和 MouseOver，你掠过第一个按钮到第二个按钮上是，有看到这样内容的窗口：
从上图可以看出，其实我是在 Google 的 Chrome 浏览器中作的测试，也是有效的。标题虽说是兼容 IE 和 FireFox，但宽松点说就是 IE 和非 IE，因为 IE 总喜欢剑起偏锋，不按规范办事，不过这种事在 IE 8 中是收敛了许多。
谢谢，其实到了现在 jQuery 的时代，一切都从简了。
很有用，谢了