IE and DOM Standard model

Question

Hi all,

Could any one explain me the difference between IE and DOM Standard event model in simple terms ?

Thanks.

Answer 1

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.