为什么使用 jQuery on() 代替 ()

背景

在前端开发中，经常需要基于用户的交互行为进行事件绑定和处理。jQuery 是一个流行的 JavaScript 库，它提供了一系列方便的方法来处理 DOM 操作和事件处理。

其中，.on() 和 () 都是用来绑定事件处理程序的方法。不过，它们之间有很大的区别，下面将详细解释为什么应该使用 .on() 方法。

区别

语法

.on() 方法的语法如下：

$(selector).on(event,childSelector,data,function)

其中，event 表示事件名称，childSelector 表示可选的子元素选择器，data 表示可选的传递给处理程序的数据，function 表示事件处理程序函数。

而 () 方法的语法相对简单：

$(selector).click(function)

其中，click 表示事件名称，function 表示事件处理程序函数。

功能

.on() 方法可以绑定多个事件处理程序，并且支持动态添加元素（比如 Ajax 返回的新元素）。另外，它还支持委托事件处理，即将事件处理程序绑定到父元素上，然后通过子元素的选择器筛选出具体要处理的子元素。

() 方法只能绑定一个事件处理程序，并且无法处理动态添加的元素。

性能

由于委托事件处理需要进行事件冒泡和元素匹配，所以在绑定大量事件处理程序时，.on() 方法的性能可能会比 () 方法差一些。不过，对于一般的网页应用来说，这种影响并不明显。

示例代码

下面是一个使用 .on() 方法的例子（假设有一个 id 为 container 的 div 元素）：

$("#container").on("click", "button", function(event) {
  event.preventDefault();
  $(this).toggleClass("active");
});

上述代码将会在点击 container 内部任何一个 button 元素时触发事件，并且切换该元素的 active 类名。

而下面是一个使用 () 方法的类似例子：

$("button").click(function() {
  $(this).toggleClass("active");
});

上述代码将在点击任何 button 元素时触发事件，并且切换该元素的 active 类名。但是，如果有新的 button 元素添加到页面中，则它们无法自动绑定事件处理程序。

结论

综上所述，虽然 .on() 方法的语法相对复杂，但是它具有更强的功能和灵活性，尤其是在处理动态添加元素和委派事件方面表现更好。因此，在实际开发中，推荐使用 .on() 方法来进行事件处理程序的绑定。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11928