jQuery 动态事件绑定 - Javascript

在 jQuery 中，可以使用 .on() 方法动态绑定事件，而不必在 HTML 内写入事件属性。这样做的好处是，我们可以在 JavaScript 中动态的添加、移除事件，从而实现更加灵活的应用。

.on() 方法

.on() 方法可以绑定多个事件，也可以为同一个事件绑定多个处理器。语法如下：

$(selector).on(event, childSelector, data, handler);

• selector: 选择器，用于选取要绑定事件的元素
• event: 一个或多个事件类型，可以用空格分隔多个事件
• childSelector: 可选参数，用于指定要绑定事件的子元素
• data: 可选参数，用于传递数据给事件处理函数
• handler: 一个或多个事件响应函数

示例

$('button').on('click', function() {
  alert('Button was clicked!');
});

上面的代码会为网页中的所有 <button> 元素绑定 click 事件，并在点击时弹出提示框。

我们也可以使用 .off() 方法来移除事件绑定：

$('button').off('click', function() {
  alert('Button was clicked!');
});

注意事项

1. .on() 方法中的 data 参数可以传递任何类型的数据。
2. 在使用 .on() 方法绑定事件时，可以使用 event.stopPropagation() 方法阻止事件冒泡，使用 event.preventDefault() 方法阻止元素默认行为。
3. 为了避免重复绑定事件，可以使用 .off() 方法在绑定之前先移除事件。
4. 在单击事件中使用 .dblclick() 会导致元素单击两次才有响应，所以在 .dblclick() 中不必再添加 .click() 事件。
5. 在使用 .on() 方法为元素绑定事件时，如果该元素是动态创建的，需要在父元素（或 document）上绑定事件，然后在处理函数中判断事件源是否为预期的元素。

参考资料

• jQuery API Documentation