mhpreiman
4/16/2018 - 11:37 AM

eventhandlers

Syntax

document.onclick = function(){ ... }
is the same as
document.addEventListener("click", function(){ ... })


Bind an eventhandler to multiple elements

On click, toggle class on/off for any particular anchor
var anchors = document.getElementsByTagName('a');

for (var anchor = 0; anchor < anchors.length; ++anchor){
    anchors[anchor].onclick = function() {
        this.classList.toggle('active');
    }
}


Multiple eventhandlers

Instead of

document.getElementById('element').addEventListener('CLICK', function(){ ... }); 
document.getElementById('element').addEventListener('SUBMIT', function(){ ... }); 
document.getElementById('element').addEventListener('HOVER', function(){ ... }); 

you can use mapping to bind multiple events:

"CLICK SUBMIT HOVER".split(" ").map(
    name => document.getElementById(key).addEventListener(name, function(){ ... })
);