Question

在jQuery中，您可以通过两种方式定义单击它的元素。例如带你想看看点击了哪个按钮：

在之前定义“按钮” （“点击”），如下所示：

$("#container button").on("click", function(){ //code });

或定义“按钮” 里面开启（“点击”），如下所示：

$("#container").on("click", "button", function(){ //code });

最好的方法是什么？

<小时/> 顺便说一下，我的代码可以看到哪个按钮处于活动状态：

$( ".view_style").on("click", "li", function(){ $('.view_style li').removeClass("active"); $(this).addClass("active"); });

这有什么好处吗？

Answer 1

这两种方式有不同的用途。您的第一个示例只是一个嵌套选择器。第二个示例是委托事件。不同之处在于，虽然两者都在现有的DOM元素上工作，但委托事件对尚未存在的元素起作用，但将来也是如此。

示例1.绑定两个事件处理程序。两种方式都能正常工作。

<div id="container">
    <button><button>
</div>

示例2.

<div id="container">
</div>

绑定两个事件处理程序，但第一个将失败，因为没有按钮，因此选择器失败。但是，委托事件绑定在容器上。单击容器时，处理程序将搜索按钮。你现在点击它，没有找到按钮，所以没有任何反应。

稍后，按钮被添加。

<div id="container">
    <button><button>
</div>

单击按钮，委派的事件处理程序找到容器内的按钮并执行处理程序。请记住，在按钮存在之前绑定处理程序，但它仍然有效。委托事件更灵活，当您需要绑定大量处理程序时，它可以节省内存。

Answer 2

提到的第一种方法并未使用event delegation概念同时使用event delegation的第二部分，意味着两种提到的方式完全不同。哪一个更好，它真的取决于你的代码。您可能需要了解event delegation是什么。这个page可以让您了解两者的区别。如果您的代码是动态创建的，例如使用AJAX请求从数据库中提取数据，或者使用任何jquery方法append/prepend，则最好坚持第二种方式。因此，为了更清楚，我将尝试根据您拥有的内容生成示例代码：

假设您在页面中有此元素：

<ul class="view_style">
  <li>1</li>
  <li>2</li>
</ul>

<button>Add New Element</button>

稍后，您通过点击.append()按钮，使用Add new element以编程方式添加了另一个元素，如果您点击该按钮，新的li元素将附加到ul在语法上如下：

$('button').click(function () {
  var
     ul = $('.view_style'),
     li = ul.has('li').length ? ul.children().last().text() : 0;

  ul.append('<li>' + ( parseInt(li) + 1) + '</li>');

});

之后你为li元素本身创建另一个点击处理程序，例如当点击它时，当前点击的元素将改变背景颜色，而我们为活动元素删除颜色的其余元素有权使用有这种风格。这里是完成此操作的代码，将其添加到上面的代码中：

// without delegation
$('.view_style li').on('click',function() {
  // remove active class for 
  $(this).siblings().removeClass('active');
  // only added active class for current clicked element
  $(this).addClass('active');
});

我们在.active类中指定了一些样式：

.active{
  background-color : yellow;
  color : red;
}

好的，我们已经完成了创作。我们来试试吧。我将逐一缩小范围。如果单击1和2的li元素，则可以看到背景颜色已更改。是的，它对已经存在的元素非常有用。那个动态创建的元素呢？因此，请尝试通过点击Add New Element按钮添加新元素。您可以看到新元素已添加/附加到ul元素中作为数字3,4，...等等。最后，如果单击新创建的元素，预期的行为是什么？背景颜色没有添加到它，当然上面的JS代码工作得那么好。为了解决这个问题，我们使用了event delegation概念，就像您的第二种方式代码一样：

// with delegation
$('.view_style').on('click','li',function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

因此，为了更清楚，您可以尝试使用此DEMO。尝试删除事件委托代码，只留下没有委托代码来测试它。

在“点击”jQuery上编写要过滤哪个元素的最佳位置

2 个答案: