Source: Multiple Events to a Listener with JavaScript. Code source sous GitHub.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * 💡 WAY 1 💡 */ const button1 = document.querySelector('.btnAction_1'); // 💬 Events button1.addEventListener('click', showEvent1); button1.addEventListener('mouseover', showEvent1); // 💬 Function function showEvent1(e) { const result1 = document.querySelector('.btnResult_1'); result1.textContent = e.type; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * 💡 WAY 2 💡 */ const button2 = document.querySelector('.btnAction_2'); // 💬 Events let myEvents = 'click mouseover'.split(' '); myEvents.forEach(event => button2.addEventListener(event, showEvent2)); // 💬 Function function showEvent2(e) { const result2 = document.querySelector('.btnResult_2'); result2.textContent = e.type; } |
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * 💡 WAY 3 💡 */ const button3 = document.querySelector('.btnAction_3'); // 💬 Events ['click', 'mouseover'].forEach(event => button3.addEventListener(event, showEvent3)); function showEvent3(e) { const result3 = document.querySelector('.btnResult_3'); result3.textContent = e.type; } |
A noter que Chris Fernandini de gomakethings.com déclare encore l’option passive à false
à la fin de la déclaration de son EventListener. En savoir plus sur les passive events listeners.
1 2 3 4 5 6 7 8 |
// Setup our function to run on various events var someFunction = function (event) { // Do something... }; // Add our event listeners window.addEventListener('click', someFunction, false); window.addEventListener('mouseover', someFunction, false); |