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

My own javascript class and addeventlistener template not working

本文关键字：工作 addeventlistener 自己的 javascript 类和 我自己      更新时间：2023-09-26

所以我在这里试验原生javascript。我想要实现的，但未能做到的是为我想要向div类添加事件侦听器的场景创建某种快捷方式。

这里我想说的是:如果用户点击一个类，然后显示一个警告。

为什么我的代码不能工作?

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/

我会使用document.querySelectorAll而不是document.getElementsByClassName，因为它更通用。

但主要问题是，你的点击函数实际上没有返回任何东西，所以你的if(click('red'))永远不会执行。同样，正在添加的事件侦听器的回调实际上没有做任何事情。我做的是做一个回调参数，然后把它传递给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>

相关文章：