mootools mouseevent targets

whats is the difference between a "target" a "relatedTarget" and a "fromelement" in terms of a开发者_C百科 mootools mouse event?

for example in the following code why is target not being used and why is there a || involved?

'mouseenter':function(e){
var reltar = e.relatedTarget || e.fromElement;
}

Basically,

The target is the element the event is dispatching on. i.e.

$('el').addEvent('mouseenter',function(event){
    console.log(event.target) //target refers to the 'el' element.
}

The relatedTarget is the element the mouse came from in case of mouseover/enter.

fromelement is the MS way to implement what relatedTarget does. Therefore,

var reltar = e.relatedTarget || e.fromElement;

is a cross-browser way to detect what element the mouse came from.

W3C says that event.relatedTarget is the element where mouse comes from in a mouseover event, or the element that the mouse goes to in a mouseout event.

However, IE uses two separate properties for those two cases: event.fromElement is the element the mouse comes from in a mouseover event, while event.toElement is the element the mouse goes to in a mouseout event.

You can find more details and some examples on the following page by Peter-Paul Koch (very good content there):

http://www.quirksmode.org/js/events_mouse.html