IE and DOM Standard model
Could anyone explain me the开发者_JS百科 difference between IE and DOM Standard event model in simple terms?
Your code is not DOM event 2 compliant: the dom event begins from the document element with "capture phase", and down to the target, then bubble upward to the document element. It is pretty difficult to implement that in IE.
Example:
<body> <div id="div1"><div id=div2></div></div></body>
If "click" event fires on div2, eventListeners run as:
- document (phase 1)
- body (phase 1)
- div1 (phase 1)
- div2 (phase 2)
- div1 (phase 3)
- body (phase 3)
- document (phase 3)
In your code you assume that all listeners are in bubble phase, but that is not a good idea because for example "focus" events have no bubble phase, and don't run correctly with your code.
They mostly do the same thing*, but you just have to determine which one to use by which browser your client uses. Dustin Diaz created this namespace to easily determine which event model to use:
var Event = {
add: function() {
if (window.addEventListener) {
return function(el, type, fn) {
DOM.$(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(DOM.$(el), window.event);
};
DOM.$(el).attachEvent('on' + type, f);
};
}
}()
};
* - I say "mostly" the same thing, because you'll notice that the DOM addEventListenter takes an extra parameter at the end, which indicates whether to use event capturing (true) or bubbling (false). Events fire from the root element down the DOM tree or from the source element up the DOM tree, so this flag determines what the event.stopPropagation function does. Capturing means that the element can call event.stopPropagation to stop event propagation to its child element. Bubbling means that the browser can call event.stopPropagation to stop event propagation to its parent element.
加载中,请稍侯......
精彩评论