我自己的 javascript 类和 addeventlistener 模板不起作用

Question

So here I am experimenting with native javascript. What I am trying to achieve, but failed to do is to create some sort of shortcut for scenarios where I want to add an event listener to a div class.

Here I am trying to say: If the user clicked on a class then show an alert.

Why doesnt my code work?

function click(red){
    var source = document.getElementsByClassName(red);
        for (i = 0; i < source.length; i++) {
            source[i].addEventListener('click', err, false);
        }
    function err() { 
    var x = 0;
    }
}

if (click('red')) {
    alert('rrr');
}

http://jsfiddle.net/y66wh26k/3/

Answer 1

I would use document.querySelectorAll instead of document.getElementsByClassName because it is more versatile.

But the main issue is that your click function actually wasn't returning anything, so your if(click('red')) would never execute. As well, your callback for the event listener being added wasn't really doing anything. So what I've done is made a callback argument, then passed that to addEventListener .

 function click(selector, callback){ var source = document.querySelectorAll(selector); for (var i = source.length-1; i >= 0; --i) { source[i].addEventListener('click', callback, false); } } click('.red', function() { alert('rrr'); });

 <div class='red'>xxx</div> <div class='red'>xxx</div> <div class='red'>xxx</div>