eventListener 中的代码不会立即调用吗？答案

【问题标题】：Code inside eventListener isn't called immediately?eventListener 中的代码不会立即调用吗？
【发布时间】：2016-07-27 15:28:54
【问题描述】：

我试图理解这段代码，但它没有任何意义。当单击#open_help 按钮时，他正在调用handleOpen()，它调用showHelp()，它调用jQuery 函数来显示帮助div，但是如果你在下面看到他正在添加和删除一个事件侦听器，并且他还调用@987654324 @。他为什么这样做？

他这样做是为了封装 hideHelp 以便等待按钮被点击吗？

// listen to "help" button
$('#open_help').bind("click",handleOpenHelp);

function handleOpenHelp(evt) {
    if (!$("#help").is(":visible")) {
        evt.preventDefault();
        evt.stopPropagation();

        showHelp();
    }
}



function showHelp() {
    $("#help").show();

    document.addEventListener("click",function __handler__(evt){
        evt.preventDefault();
        evt.stopPropagation();
        evt.stopImmediatePropagation();

        document.removeEventListener("click",__handler__,true);
        hideHelp();
    },true);
}



function hideHelp() {
    $("#help").hide();
}

【问题讨论】：

标签： javascript jquery closures addeventlistener

【解决方案1】：

让我们将代码简化到最低限度并重新安排一下，看看发生了什么：

$("#help").show(); // Show the help dialog

// If user clicks ANYWHERE (the whole document)
document.addEventListener("click",function __handler__(evt){
    hideHelp(); // Hide the help dialog

    // Remove myself from the event listener so that this function
    // will not be called again when user clicks anywhere:
    document.removeEventListener("click",__handler__,true);
},true);

所以基本上它会在任何地方（按钮、文本、链接、空格......几乎任何地方）抓取所有点击事件，并执行一个隐藏帮助对话框的功能。这样做之后（在原始代码之前），它会将自身从点击事件处理程序中移除，以便页面上的其他内容可以再次获得点击。

【讨论】：

【解决方案2】：

如果您注意到隐藏帮助基本上是“单击”事件侦听器的一部分，它会在用户单击帮助后附加到文档元素上。这意味着一旦显示帮助信息，您只需单击页面上的任意位置，显示的内容将再次被隐藏。

stoppropigation 和 stopImmediatePropogation 只是保证不会发生其他任何事情，接受他想要的。它会停止所有事件处理程序和父事件处理程序。

然后，他删除了在触发 show 事件时添加的“Click”事件侦听器。单击帮助后，它将再次添加。

最后他隐藏了帮助元素并等待再次点击帮助。

希望这能回答你的问题。

【讨论】：