将 eventListener 添加到复选框答案

【问题标题】：Adding eventListener to checkbox将 eventListener 添加到复选框
【发布时间】：2017-02-07 19:02:01
【问题描述】：

我可以将JavaScript 中的eventListener 添加到复选框，还是必须使用html onclick = someFunc() 中的属性来触发功能。我设置了一个fiddle，我尝试在其中添加一个eventListener，但这并没有给我预期的输出。

var checkb = document.getElementById("checkbox1");

(function() {

    checkbFunc(checkb);

    function checkbFunc(checkb) {
        checkb.addEventListener("click", function(e) {
            if (checkb.checked) {
                alert("i am checked");

            } else {
                alert("i am not checked")
            }
        });
    }
});

【问题讨论】：

你永远不会执行这个函数。您的意思是立即调用该函数表达式吗？
看到这个Demo！
@AndrewL。用其他函数，这样写，就可以了！
(function() { ... }); 从不执行匿名函数。但是，如果您将其更改为 (function() { ... })();，那么它确实可以并且您的小提琴可以工作。

标签： javascript html jquery css dom-events

【解决方案1】：

是的，你可以。只需从所有函数中解包代码，然后改用change 事件，它应该可以正常工作

var checkb = document.getElementById("checkbox1");

checkb.addEventListener("change", function(e) {
    if (this.checked) {
        alert("i am checked");
    } else {
        alert("i am not checked")
    }
});

FIDDLE

【讨论】：

或者使用(function() { ... })();执行函数表达式

【解决方案2】：

你可以这样做

var checkb = document.getElementById("checkbox1");

(function() {

    checkbFunc(checkb);

    function checkbFunc(checkb) {
        checkb.addEventListener("click", function(e) {
            if( checkb.checked ) {
                alert("i am checked");

            } else {
                alert("i am not checked")
            }
        });
    }
})(); // <--added this

Demo

【讨论】：

【解决方案3】：

你可以简单地删除你的匿名函数

var checkb = document.getElementById("checkbox1");

checkbFunc(checkb);
    
function checkbFunc(checkb) {
  checkb.addEventListener("click", function(e) {
    if( checkb.checked ) {
      alert("i am checked");

    } else {
      alert("i am not checked")
    }
  });
}

&lt;input type="checkbox" id="checkbox1"/&gt;

或者，更好的是，使用 JQuery document.ready 块。

【讨论】：

【解决方案4】：

您的代码不工作，因为主要的匿名函数没有被执行。

下面的代码应该适合你。

var checkb = document.getElementById("checkbox1");

(function() {

  checkbFunc(checkb);

    function checkbFunc(checkb) {
        console.log(checkb);
        checkb.addEventListener("click", function(e) {
            if( checkb.checked ) {
                alert("i am checked");

            } else {
                alert("i am not checked")
            }
        });
    }
}() // Add these round braces );

【讨论】：