La méthode addEvent suivante est une façade basique permettant d’ajouter des listeners sur les éléments du DOM. La méthode addEvent permet d’attacher un évènement sur plusieurs élèments en une instruction.
addEvent est compatible avec Internet Explorer IE8+, Chrome et Firefox. Cette méthode peut être utilisée sur un nombre limité d’éléments pour éviter des problèmes de performances sur la page. Pour cibler un nombre important d’élément il est conseillé d’utiliser la délégation d’événement. Personnellement j’utilise la libraire Gator.js pour gérer les événements en vanilla js.
Exemple d’utilisation :
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lab</title>
<meta name="viewport" content="width=device-width">
<style>
html {
padding: 1em;
}
div {
background: cyan;
width: 20%;
margin: 1em;
padding: 1em;
cursor: pointer;
}
</style>
</head>
<body>
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<script src="js/event.js"></script>
<script>
(function() {
var divlist = document.querySelectorAll( 'div' );
divlist.addEvent( 'click', function( e ) {
console.log( e );
});
}());
</script>
</body>
</html>
/*------------------------------------------------------------------------------
* JavaScript addEvent method :
*
* this method is a basic facade that allows you to use a simplified method
* of adding event listeners to DOM nodes.
*-----------------------------------------------------------------------------*/
(function() {
/**
* Extend DOM Element with addEvent.
*/
Element.prototype.addEvent = (function() {
if ( this.addEventListener ) {
return function( eventName, eventHandler ) {
this.addEventListener( eventName, eventHandler, true );
};
}
else if ( this.attachEvent ) { //IE
return function( eventName, eventHandler ) {
this.attachEvent( 'on' + eventName, eventHandler );
};
}
})();
if( window['StaticNodeList'] ) { //IE
StaticNodeList.prototype.addEvent = function( eventName, eventHandler ) {
var nodeList = this;
for ( var i = 0, count = nodeList.length; i < count; ++i ) {
nodeList[ i ].addEvent( eventName, eventHandler );
}
};
}
else if( window['NodeList'] ) {
NodeList.prototype.addEvent = function( eventName, eventHandler ) {
var nodeList = this;
for ( var i = 0, count = nodeList.length; i < count; ++i ) {
nodeList[ i ].addEvent( eventName, eventHandler );
}
};
}
}());