📅 最后修改于: 2023-12-03 15:02:11.451000 🧑 作者: Mango
jQuery是一个基于JavaScript的开源库，其提供了大量易于使用的功能，包括DOM操作、Ajax调用、事件处理等。其中on事件是jQuery中最重要的事件之一。这个事件允许我们添加事件，而不需要覆盖已定义的事件。它可以用于单个元素上的事件，也可以用于集合中的所有元素上的事件。
on事件有一个非常简单的语法，如下：
$(selector).on(event, childSelector, data, callback);
其中：
selector：必需。需要绑定事件元素的选择器。event：必需。需要绑定的事件类型，例如click、mouseover、keyup等等。childSelector：可选。用于指定在选择器匹配的元素中的子元素。data：可选。传递到事件处理程序的数据对象。callback：必需。当事件被触发时执行回调函数。首先，我们需要一个HTML页面，其中包含一个按钮元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery On Event</title>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<button>Click me!</button>
<script>
$(function(){
$('button').on('click',function(){
alert('Hello World!');
});
})
</script>
</body>
</html>
上述代码使用jQuery的选择器绑定了一个点击事件。当按钮被点击时，会弹出一个消息框，显示“Hello World!”。
如果我们需要使用on事件来绑定动态生成的元素，在jQuery中，我们需要使用委托事件。这是因为on方法绑定的事件是静态的，而委托事件是动态的。表示事件将委托给父元素，而不是直接绑定到子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery On Event</title>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<button>Add new button</button>
<div class="container"></div>
<script>
$(function(){
$('body').on('click','button',function(){
$('.container').append('<button>New Button</button>');
});
$('.container').on('click', 'button', function(){
alert('Hello World!');
});
})
</script>
</body>
</html>
在上面的代码中，我们使用了on方法来绑定了click事件。当用户点击‘Add new button’按钮时，会动态添加一个按钮到页面上。然后，我们使用了委托事件将click事件绑定到动态添加的按钮上。当用户点击新的按钮时，会弹出一个消息框，显示“Hello World!”。
on事件具有以下优点：
总之，jQuery的on事件是一种非常强大的技术，可以使我们更快、更容易地编写更加优化的JavaScript代码。