toElement的兼容写法

toElement的兼容写法

HTML

<div id='main' style='padding:10px;background-color:green;'>
    <div id='kixi' style='width:200px;height:100px;background-color:blue;color:#fff;'>123</div>
</div>

CSS

/*
清晰网
kixi.com.cn
从javascript开始
*/

JavaScript

//DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。可以把下面这个跨浏览器取得相关元素的方法添加到EventUtil对象中


var EventUtil = {
    //event的兼容写法
    getEvent: function (event) {
        return event ? event : window.event;
    },
    //target的兼容写法
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    //绑定函数到事件上，兼容写法
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    //relatedTarget的兼容写法，获取所到的DIV参数
    getRelatedTarget: function (event) {
        if (event.relatedTarget) {
        console.log(1)
            return event.relatedTarget;
        } else if (event.toElement) {
        console.log(2)
            return event.toElement;
        } else if (event.fromElement) {
        console.log(3)
            return event.fromElement;
        } else {
        console.log(4)
            return null;
        }
    }
};
var div = document.getElementById("kixi");
EventUtil.addHandler(div, "mouseout", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var relatedTarget = EventUtil.getRelatedTarget(event);
    //alert("Moused out of " + target.id + " to " + relatedTarget.id);
    console.log(relatedTarget);
});