Devrais-je attribuer directement des événements JavaScript juste pour unifier le code?

Question

Suis-je une programmation mal ou de se pencher en arrière trop pour IE par des gestionnaires d'événements assigne comme:

element.someEvent = someFunction; 

au lieu de:

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

• Quelles seraient les inconvénients et les avantages à cette idée?
• Que suis-je en train de rater ou de ne pas me contenter de tester et de choisir la bonne méthode?

Answer 1

Si vous utilisez le style element.onclick = xxx;, vous vous limiter (et tous les autres scripts que vous utilisez sur la page) à un seul gestionnaire d'événementpour l'événement sur cet élément (tout gestionnaire précédent pour ce l'événement est matraqué). Avec le mécanisme addEventListener/attachEvent, vous pouvez attacher et supprimer des gestionnaires d'événements indépendamment les uns des autres, sans interférence.

Ainsi par exemple, si vous faites:

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

... puis tout gestionnaire click précédent sur l'élément foo époustouflé et obtient non plus appelé quand foo cliquez dessus. En revanche:

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

Maintenant, votre gestionnaire click est appelé, mais toutes les autres click gestionnaires qui ont déjà été attachés à l'élément également obtenir appelé. Tu joues bien avec les autres. :-)

Il est facile de créer une fonction qui fers ces choses pour vous:

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; 
    } 
} 

... ou si vous vraiment veulent aller à la ville:

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; 
})(); 

... qui crée une fonction qui détecte fois quel type de gestionnaire à utiliser, puis utilise tout au long.

Franchement, bien que, pour ce genre de choses, il est utile de tirer parti du travail des autres et utiliser une bibliothèque comme jQuery, Prototype, YUI, Closure ou any of several others.

Answer 2

Dans IE, vous devez utiliser attachEvent. (Le mécanisme DOM standard est addEventListener.) Je recommande fortement d'utiliser une bibliothèque comme jQuery qui prend soin de ces différences de navigateur pour vous. Des frameworks comme jQuery se chargent également d'aplanir les différences entre les modèles d'événements dans différents navigateurs.

Answer 3

Si vous avez un contrôle total sur la page et que vous êtes sûr que toutes les liaisons d'événements se produisent au même endroit, alors .onevent est le moyen le plus simple et le plus supporté.

Si vous êtes inquiet sur le remplacement d'un gestionnaire d'événement précédent, vous pouvez toujours faire:

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

Answer 4

De nos jours, il y a beaucoup javascript bibliothèque là-bas qui prendra soin des navigateurs croix compatibilité pour vous et également codage en javascript amusant. L'un des plus populaires est le Jquery.

Vous pouvez enregistrer des événements avec Jquery comme ceci:

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

or 

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