在前端开发过程中，处理DOM事件是一个非常重要的部分。为了管理这些事件，我们可以使用jQuery的.on()方法或者原生JavaScript的.addEventListener()方法。虽然它们都可以用于添加和删除事件监听器，但是它们的具体实现和使用方式有所不同。在本文中，我们将比较并详细解释这两种方法的使用和区别，以及它们在实际应用中的优缺点。
jQuery .on() 方法
.on() 是jQuery提供的一个事件监听器方法。它可以在元素上添加一个或多个事件处理程序，并支持动态地管理事件。.on() 的语法如下：
$(selector).on(event, childSelector, data, handler);
selector：选择器字符串，表示要添加事件的元素。event：表示要绑定的事件类型，例如“click”、“mouseover”等。childSelector：一个可选的选择器字符串，表示要委托的子元素。data：一个可选对象，包含传递给处理程序的数据。handler：事件触发时执行的函数。
以下是一个例子，演示如何使用.on() 在单击按钮时显示警告框：
$(document).ready(function(){
$("button").on("click", function(){
alert("Button clicked!");
});
});此外，.on() 还可以用于动态地添加新元素的事件监听器。例如，如果我们想在单击一个按钮后添加一个新的div元素，我们可以这样做：
$(document).on("click", "button", function(){
$("<div>").appendTo("body");
});JavaScript .addEventListener() 方法
.addEventListener() 是原生JavaScript提供的一个DOM方法，用于向单个元素添加事件监听器。它的语法如下：
element.addEventListener(event, function, useCapture);
element：表示要添加事件的元素。event：表示要绑定的事件类型，例如“click”、“mouseover”等。function：事件触发时执行的函数。useCapture：一个可选的布尔值，表示是否使用事件捕获。
以下是一个例子，演示如何使用.addEventListener() 在单击按钮时显示警告框：
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("button").addEventListener("click", function(){
alert("Button clicked!");
});
});和 .on() 不同，.addEventListener() 只能为已经存在的元素添加事件监听器。但是，它支持事件捕获和冒泡机制，并且相对于.on()，它的性能更好。
比较与总结
虽然 jQuery 的 .on() 和 JavaScript 的 .addEventListener() 都可以用于处理 DOM 事件，但是它们之间存在一些区别和差异，主要包括：
.addEventListener()只支持事件捕获和冒泡机制，而.on()不支持事件捕获；.addEventListener()只能给已经存在的元素添加事件监听器，而.on()可以动态地添加新元素的事件监听器；- 在性能方面，
.addEventListener()的性能更好，因为它是原生的 DOM 方法。
在实际开发中，我们应该根据具体情况来选择使用哪种方法。对于大多数简单的事件处理程序，使用 jQuery 的 .on() 可以简化代码并提高可读性。但是，如果需要更高的性能或者需要实现复杂的事件处理逻辑，则应该使用原生 JavaScript 的 .addEventListener() 方法。
示例代码
以下是一个完整的示例代码，演示了如何使用 jQuery 的 .on() 和 JavaScript 的 .addEventListener() 为按钮添加点击事件。
<!DOCTYPE html> <html> <head> <meta charset=" > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/27826) ，转载请注明来源 [https://www.javascriptcn.com/post/27826](https://www.javascriptcn.com/post/27826)