创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性

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

所以，为了保持一致的使用方式，也为了保持原有的使用习惯，我们加入以下 JS 代码(代码有些紧凑，未加注释，应该很好理解)：

<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 属性了。这就来做个测试吧：

<script>
    function test() {
        alert("event:" + event + ", srcElement:" + event.srcElement.innerHTML + ", fromElement:" + event.fromElement.innerHTML + ", toElement:" + event.toElement.innerHTML)
    }
</script>
<button οnmοuseοut="test()">
    MouseOut
</button>
<button οnmοuseοver="test()">
    MouseOver
</button>

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

 

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