背景
在前端开发中，经常需要基于用户的交互行为进行事件绑定和处理。jQuery 是一个流行的 JavaScript 库，它提供了一系列方便的方法来处理 DOM 操作和事件处理。
其中，.on() 和 () 都是用来绑定事件处理程序的方法。不过，它们之间有很大的区别，下面将详细解释为什么应该使用 .on() 方法。
区别
语法
.on() 方法的语法如下：
-------------------------------------------------
其中，event 表示事件名称，childSelector 表示可选的子元素选择器，data 表示可选的传递给处理程序的数据，function 表示事件处理程序函数。
而 () 方法的语法相对简单：
---------------------------
其中，click 表示事件名称，function 表示事件处理程序函数。
功能
.on() 方法可以绑定多个事件处理程序，并且支持动态添加元素（比如 Ajax 返回的新元素）。另外，它还支持委托事件处理，即将事件处理程序绑定到父元素上，然后通过子元素的选择器筛选出具体要处理的子元素。
() 方法只能绑定一个事件处理程序，并且无法处理动态添加的元素。
性能
由于委托事件处理需要进行事件冒泡和元素匹配，所以在绑定大量事件处理程序时，.on() 方法的性能可能会比 () 方法差一些。不过，对于一般的网页应用来说，这种影响并不明显。
示例代码
下面是一个使用 .on() 方法的例子（假设有一个 id 为 container 的 div 元素）：
--------------------------- --------- --------------- - ----------------------- ------------------------------ ---
上述代码将会在点击 container 内部任何一个 button 元素时触发事件，并且切换该元素的 active 类名。
而下面是一个使用 () 方法的类似例子：
---------------------------- - ------------------------------ ---
上述代码将在点击任何 button 元素时触发事件，并且切换该元素的 active 类名。但是，如果有新的 button 元素添加到页面中，则它们无法自动绑定事件处理程序。
结论
综上所述，虽然 .on() 方法的语法相对复杂，但是它具有更强的功能和灵活性，尤其是在处理动态添加元素和委派事件方面表现更好。因此，在实际开发中，推荐使用 .on() 方法来进行事件处理程序的绑定。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11928