La m\u00e9thode addEvent suivante est une fa\u00e7ade basique permettant d’ajouter des listeners sur les \u00e9l\u00e9ments du DOM. La m\u00e9thode addEvent permet d’attacher un \u00e9v\u00e8nement sur plusieurs \u00e9l\u00e8ments en une instruction.<\/p>\n
addEvent est compatible avec Internet Explorer IE8+, Chrome et Firefox. Cette m\u00e9thode peut \u00eatre utilis\u00e9e sur un nombre limit\u00e9 d\u2019\u00e9l\u00e9ments pour \u00e9viter des probl\u00e8mes de performances sur la page. Pour cibler un nombre important d’\u00e9l\u00e9ment il est conseill\u00e9 d’utiliser la d\u00e9l\u00e9gation d\u2019\u00e9v\u00e9nement<\/a>. Personnellement j’utilise la libraire Gator.js<\/a>\u00a0pour g\u00e9rer les \u00e9v\u00e9nements en vanilla js.<\/p>\n Exemple d’utilisation :<\/span><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" La m\u00e9thode addEvent suivante est une fa\u00e7ade basique permettant d’ajouter des listeners sur les \u00e9l\u00e9ments du DOM. La m\u00e9thode addEvent permet d’attacher un \u00e9v\u00e8nement sur plusieurs \u00e9l\u00e8ments en une instruction. addEvent est compatible avec Internet Explorer IE8+, Chrome et Firefox. Cette m\u00e9thode peut \u00eatre utilis\u00e9e sur un nombre limit\u00e9 d\u2019\u00e9l\u00e9ments pour \u00e9viter des probl\u00e8mes de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-1259","post","type-post","status-publish","format-standard","hentry","category-javascript-2"],"_links":{"self":[{"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/posts\/1259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/comments?post=1259"}],"version-history":[{"count":1,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/posts\/1259\/revisions"}],"predecessor-version":[{"id":2460,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/posts\/1259\/revisions\/2460"}],"wp:attachment":[{"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/media?parent=1259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/categories?post=1259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devportfolio.net\/wp-dev-blog\/wp-json\/wp\/v2\/tags?post=1259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!DOCTYPE html>\n<head>\n\t<meta charset=\"utf-8\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n\t<title>Lab<\/title> \n\t<meta name=\"viewport\" content=\"width=device-width\"> \n\t<style>\n\thtml {\n\t\tpadding: 1em;\n\t}\n\tdiv {\n\t\tbackground: cyan;\n\t\twidth: 20%;\n\t\tmargin: 1em;\n\t\tpadding: 1em;\n\t\tcursor: pointer;\n\t}\n\t<\/style>\n<\/head>\n<body>\n\n\t<div>div 1<\/div>\n\t<div>div 2<\/div>\n\t<div>div 3<\/div>\n\t\n\t<script src=\"js\/event.js\"><\/script>\n\t<script>\n\t(function() {\n\n\t\tvar divlist = document.querySelectorAll( 'div' );\n\t\t\n\t\tdivlist.addEvent( 'click', function( e ) {\n\t\t\t\n\t\t\tconsole.log( e );\n\t\t});\n\t\t\n\t}());\n\t<\/script>\n<\/body>\n<\/html><\/pre>\n\/*------------------------------------------------------------------------------\n * JavaScript addEvent method :\t\n *\n * this method is a basic facade that allows you to use a simplified method \n * of adding event listeners to DOM nodes. \n *-----------------------------------------------------------------------------*\/ \n(function() {\n\n\t\/**\n\t* Extend DOM Element with addEvent.\t\t\n\t*\/\n\tElement.prototype.addEvent = (function() {\n\n\t\tif ( this.addEventListener ) {\n\n\t\t\treturn function( eventName, eventHandler ) {\t\t\t\t\n\t\t\t\tthis.addEventListener( eventName, eventHandler, true );\n\t\t\t};\n\t\t}\n\t\telse if ( this.attachEvent ) {\t\/\/IE\n\n\t\t\treturn function( eventName, eventHandler ) {\t\t\t\t\t\t\t\n\t\t\t\tthis.attachEvent( 'on' + eventName, eventHandler );\n\t\t\t};\n\t\t}\n\t\t\n\t})();\n\t\t\n\tif( window['StaticNodeList'] ) {\t\/\/IE\t\n\t\t\n\t\tStaticNodeList.prototype.addEvent = function( eventName, eventHandler ) {\n\n\t\t\tvar nodeList = this;\n\n\t\t\tfor ( var i = 0, count = nodeList.length; i < count; ++i ) {\n\t\t\t\n\t\t\t\tnodeList[ i ].addEvent( eventName, eventHandler );\n\t\t\t}\n\t\t};\n\t}\n\t\n\telse if( window['NodeList'] ) {\t\t\n\t\t\t\t\n\t\tNodeList.prototype.addEvent = function( eventName, eventHandler ) {\n\n\t\t\tvar nodeList = this;\n\n\t\t\tfor ( var i = 0, count = nodeList.length; i < count; ++i ) {\n\t\t\t\n\t\t\t\tnodeList[ i ].addEvent( eventName, eventHandler );\n\t\t\t}\n\t\t};\n\t}\t\n}());<\/pre>\n