将单击事件绑定到空选择器是否危险？答案

【问题标题】：Is binding a click event to a null selector dangerous?将单击事件绑定到空选择器是否危险？
【发布时间】：2014-08-20 11:25:50
【问题描述】：

如果我使用on 绑定空选择器会发生什么错误吗？如果我不必自己显式检查选择器是否为空，它将简化我的代码并允许我链接一些东西。

如果我在页面上执行十几次此操作，是否会对性能、安全性或内存泄漏产生影响？

$(document.body).on('click', null, function () { ... }

【问题讨论】：

为什么需要委托事件处理程序？不是一个简单的 .click 工作吗？正文始终在页面上...
因为以后可以动态添加元素。
什么版本的 JQuery？
十次意味着每次点击任何元素都会发生十几个事件。
@TruMan1 稍后添加元素无关紧要，事件将冒泡到正文，您的处理程序将捕获它。我会添加一个答案和一个小提琴

标签： javascript jquery performance jquery-events

【解决方案1】：

如果您打算动态添加元素，则使用.on() 方法绑定到更高的元素没有任何问题。

请记住，尽管您必须指定最终定义动态添加的元素的选择器。

当点击标签时，下面的代码将触发。

$(document).on('click', 'label', function(e) {
    alert('dynamically added label clicked');
});

当点击任何元素时，此代码将触发。

$(document).on('click', null, function (e) {
    alert('fired regardless what element you clicked');
});

来自 jQuery 文档：

一个选择器字符串来过滤被选元素的后代这将调用处理程序。 如果选择器为空或省略，则处理程序总是在到达所选元素时被调用。

【讨论】：

【解决方案2】：

如果您的问题是引发 click 事件的元素是动态添加的，您仍然可以在 body 上使用直接事件处理程序并捕获这些事件。

委托事件处理程序让您有机会过滤掉其中一些点击事件，但似乎并非如此，因为您将选择器设置为 null。

例如，如果您有一个 div 并在其中添加按钮并向 div 上的单击事件添加事件处理程序，您将捕获所有按钮的所有单击事件，即使是动态添加的。

<div>
    <input type="button" value="add button" id="buttonAddMore"/>
    <span id="whatClicked"></span>
</div>

$('div').on("click", function(event){
    $('#whatClicked').text("the id of the clicked element inside the div is: " + event.target.id);
});

This fiddle demonstrates this.

委托事件还有其他一些微妙之处，例如，它们不会响应在其注册的元素中引发的事件，在本例中，这将是对 div 的点击，这可能很重要。

无论哪种方式，如果您查看事件是如何注册的，在您的情况下，您可以通过在控制台中调用 $._data(document.body, "events") 来查看并查看 click 事件处理程序您的方法并使用速记版本（即.click 或on("click", function() {...})）注册，您会看到它们产生相同的对象，除了选择器为空（.on（“click”，null ...）在一个case 和 undefined 在另一个 (.click)

【讨论】：