添加事件处理程序并立即调用一次答案

【问题标题】：Add event handler and call once immediately添加事件处理程序并立即调用一次
【发布时间】：2019-05-23 12:45:10
【问题描述】：

在使用 jQuery 的 Web 应用程序中，我有以下代码：

$("input[type=checkbox]").on("click", function (event) {
    let isChecked = event.currentTarget.checked;
    // Do something
});

每当用户点击一个复选框时，这都会做一些事情。

有必要在加载页面时通过调用此事件处理程序来正确初始化页面状态，这样它就可以在开始时更改复选框时执行任何操作。

我怎样才能简单地为所有匹配元素调用添加的事件处理程序，而不实际触发事件？在“点击”的情况下，这将修改复选框状态，从而破坏数据。

我目前的解决方法是这样的：

$("input[type=checkbox]")
    .on("click change", function (event) {
        let isChecked = event.currentTarget.checked;
        // Do something
    })
    .change();

这为多个事件添加了事件处理程序，并且只触发一个没有副作用的事件。但我想将事件处理程序限制在真正需要的内容上。如果只能在元素上使用“单击”事件，则别无选择。此外，在我的例子中，只有元素被隐藏或显示，但如果发生其他事情，现在可能会发生两次。

我在这个示例伪代码中寻找onAndNow 函数：

$("input[type=checkbox]").onAndNow("click", function (event) {
    let isChecked = event.currentTarget.checked;
    // Do something
});

这是另一个不太好的和不完整的解决方案：

function onCheckboxClicked(event) {
    let isChecked = event.currentTarget.checked;
    // Do something
}
$("input[type=checkbox]").on("click", onCheckboxClicked);
onCheckboxClicked(???);

【问题讨论】：

您的最后一个代码示例是最合适的解决方案，但是您希望该函数在页面首次加载时在哪个元素上执行？
事件处理程序所附加的所有内容，即当用户与其交互时将启动操作的所有内容。
在这种情况下，您需要遍历它们并将该元素的引用传递给函数。
@RoryMcCrossan $("input[type=checkbox]").each(onCheckboxClicked) 会工作，不是吗？然后你可以用this访问el？
@Kobe 在那种情况下，是的。

标签： javascript jquery event-handling

【解决方案1】：

您可以使用以下代码在每个元素上触发该函数：

function onCheckboxClicked(event) {
    if (event == 0) {
      console.log("onload")
    } else {
      console.log("event")
      // Do something
    }
    
    console.log($(this).prop('checked'))

}

// Event driven
$("input[type=checkbox]").on("click", onCheckboxClicked);

// Executed on load
$("input[type=checkbox]").each(onCheckboxClicked);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />

注意：如您所见，您将无法通过 onload 传递事件，因此您必须针对每种情况编写代码。但是，您可以使用 $(this) 访问该元素。

【讨论】：