Should i assign JavaScript events directly just to unify code?

Am I programming poorly 开发者_Python百科or bending backwards too much for IE by assigne event handlers like:

element.someEvent = someFunction; 

instead of:

element.attachEventListener("someEvent", someFunction, false);

• What would be some cons and pros to this idea?
• What am i missing out or setting my self up to by not just testing and choosing the proper method?

If you use the element.onclick = xxx; style, you're limiting yourself (and any other scripts you're using on the page) to a single event handler for the event on that element (any previous handler for that event gets bludgeoned). With the addEventListener / attachEvent mechanism, you can attach and remove event handlers independently of one another, without cross-talk.

So for instance, if you do:

 document.getElementById('foo').onclick = function() {
 };

...then any previous click handler on element foo gets blown away and no longer called when foo is clicked. In contrast:

 document.getElementById('foo').addEventListener('click', function() {
 });

Now your click handler gets called, but any other click handlers that have previously been attached to the element also get called. You're playing nicely with others. :-)

It's easy to create a function that irons these things out for you:

function hookEvent(element, eventName, handler) {
    if (element.attachEvent) {
        element.attachEvent("on" + eventName, handler);
    }
    else if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else {
        element["on" + eventName] = handler;
    }
}

...or if you really want to go to town:

var hookEvent = (function() {

    function hookViaAttach(element, eventName, handler) {
        element.attachEvent("on" + eventName, handler);
    }
    function hookViaAdd(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
    }
    function hookDOM0(element, eventName, handler) {
        element["on" + eventName] = handler;
    }

    if (document.attachEvent) {
        return hookViaAttach;
    }
    if (document.addEventListener) {
        return hookViaAdd;
    }
    return hookDOM0;
})();

...which creates a function that detects once what kind of handler to use and then uses that throughout.

Frankly, though, for this stuff it's useful to leverage the work of others and use a library like jQuery, Prototype, YUI, Closure, or any of several others.

If you have full control over the page, and you're sure that all event binding happens in one place, then .onevent is the simplest and most supported way.

If you're worried about overriding a previous event handler, you can always do:

var oldOnclick = el.onclick;
el.onclick = function () {
   // blah blah
   if (oldOnclick) oldOnclick();
};

In IE, you need to use attachEvent. (The standard DOM mechanism is addEventListener.) I would highly recommend using a library like jQuery that takes care of these browser differences for you. Frameworks like jQuery also take care of ironing out the differences between the event models in different browsers.

Nowadays there are many javascript library out there that will take care of the cross browsers compatibility for you and also make coding in javascript fun. One of the most popular one out there is Jquery.

You can register events with Jquery like so:

$(elem).click(function () {
    alert('Event handler');
});

or 

$(elem).bind('click', function() {
    alert('Event handler');
});