javascript - eventListener 内的代码没有立即调用？

Question

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

他这样做只是为了封装 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();
}

Answer 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);

所以基本上它会抓取任何东西(按钮、文本、链接、空白......几乎任何地方)上的所有点击事件，并执行一个函数来隐藏帮助对话框。完成此操作后(在原始代码中之前)，它将自身从点击事件处理程序中删除，以便页面上的其他内容可以再次获得点击。