有或没有打开的JQuery事件处理程序？答案

【问题标题】：JQuery event handler with or without on?有或没有打开的JQuery事件处理程序？
【发布时间】：2015-08-25 19:12:20
【问题描述】：

如果我的 html 文档中有一个如下所示的下拉列表：

<select id="myDropdown">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
</select>

并且我想用 JQuery 连接 change 事件，那么这两种方法似乎都适用于 JQuery：

$("#myDropdown").change(function () {
   // Do something
});

和

$('#myDropdown').on('change', function () {
   // Do something
});

这两者有什么区别，是否更喜欢其中之一？

【问题讨论】：

What is best way to perform jQuery .change() 的可能重复项
@LinkinTED 我相信这个问题一般是关于事件绑定，而不仅仅是关于 change()
不是重复的。他在这里使用on。
@Alex 然而，从 1.7 开始，引入了 on()……这意味着 change() 是 on("change") 的快捷方式
一般来说，在事件将绑定到的匹配元素集合上调用on()（不像委托），唯一的主要区别是您可以使用off()关闭事件

标签： jquery

【解决方案1】：

看，两者都称为事件绑定，没有区别，但.on() 比直接事件绑定有一些优势（没有合适的词） .

.on() 方法的优势是event delegation，当您在页面中有动态创建的元素时，这很有用。它有一些特定的语法，但使用.on() 方法：

$(staticParent).on(event, selector, callback);

.on() 方法的另一个优点是，如果您在选择器上绑定了任何事件，则可以使用.off() 方法取消该事件。

还想提一下 .on()/.off() 已经替换了 .bind()/.unbind() 方法，关于事件委托它已经替换了 .live()/.die()。

【讨论】：

它实际上被称为直接和委托事件，所以你是正确的;-)
@rafat 不会超过直接绑定，不是吗？

【解决方案2】：

$.on(...)，是一种更强大的方法，因为它允许您在容器上仅附加一个事件侦听器，并为其提供匹配的选择器，而不是附加大量事件侦听器... 例如这段代码：

$('#container .item').click(function(){ ... });

$('#container').on('click', '.item', function(){ ... });

.click() 方法将事件侦听器附加到每个 .item 元素 - 页面上可能有很多...

.on('click'...) 方法仅将一个事件侦听器附加到#container 元素，并且在每次点击时它都会检查触发事件的元素是否为.item 元素，如果是，则执行回调函数。

.on(...) 函数还“捕获”当这段 js 运行时不在页面上的 .item 元素，不像 .click() 方法只绑定当前存在的 .item 元素，你需要如果您稍后将新创建的.item 元素注入页面，则手动绑定它。

【讨论】：