Related Target

by Lien Z

HTML

<div id="myDiv"></div>
<div id="write"></div>

CSS

#myDiv{
      background-color:red;height:100px;width:100px;
}

JavaScript

var EventUtil = {
    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
        }
    },
    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false)
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler)
        } else {
            element['on' + type] = null
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event ? event.target : window.event.srcElement;
    },
    getRelatedTarget: function(event) {
        if (event.relatedTarget) {
            return event.relatedTarget;
        } else if (event.toElement) {
            return event.toElement;
        } else if (event.fromElement) {
            return event.fromElement;
        } else {
            return null;
        }
    }

}
    var div = document.getElementById('myDiv');
        EventUtil.addHandler(div,'mouseout',function(event){
            event = EventUtil.getEvent(event);
            
            var target = EventUtil.getTarget(event)
            var relatedTarget = EventUtil.getRelatedTarget(event);
            document.getElementById('write').innerHTML = 'mouseout of: '+target.tagName + ' to ' + relatedTarget.tagName;

        })