一、click() 方法
click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。
$(selector).click(handler);
其中，selector 是需要绑定事件的元素；handler 是事件触发后要执行的函数，可以是预定义函数、匿名函数或命名函数。
//为 id 为 myBtn 的按钮添加一个 click 事件处理程序：
$('#myBtn').click(function() {
console.log('按钮被点击了');
});
二、on()/off()方法
jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
1 on() 方法
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。以下是 on() 方法的语法：
$(selector).on(event, childSelector, data, handler);
selector：需要绑定事件的元素，可以是任何选择器。
event：要绑定的事件类型，如 "click"、"mouseover"、"keydown" 等。
childSelector（可选）：子选择器，如果指定了子选择器，则只有子元素触发该事件才会执行处理程序。
data（可选）：传递给事件处理程序的额外数据。
handler：事件触发后要执行的函数，可以是预定义函数、匿名函数或命名函数。
以下代码将为所有的 p 标签添加 click、mouseover 和 mouseout 三个事件的处理程序：
$('p').on({
click: function() {
console.log('点击事件已触发');
},
mouseover: function() {
console.log('鼠标移动到此标签上');
},
mouseout: function() {
console.log('鼠标离开此标签');
}
});
2 off() 方法
off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。
$(selector).off(event, childSelector, handler);
selector：需要移除事件处理程序的元素，可以是任何选择器。
event（可选）：要移除的事件类型，如 "click"、"mouseover"、"keydown" 等。如果不指定该参数，则移除所有事件处理程序。
childSelector（可选）：子选择器，如果指定了子选择器，则只有子元素触发该事件才会移除处理程序。
handler（可选）：需要移除的事件处理程序，如果不指定该参数，则移除所有的处理程序。
以下代码将为 id 为 myBtn 的按钮添加一个 click 事件处理程序，并在 5 秒钟后移除该事件处理程序：
$('#myBtn').on('click', function() {
console.log('按钮被点击了');
$(this).off('click'); // 移除 click 事件处理程序
});
setTimeout(function() {
$('#myBtn').off('click'); // 移除所有 click 事件处理程序
}, 5000);
三、事件切换 toggle()
jQuery 中事件切换操作通常使用 toggle() 方法来实现。该方法可以在两个或多个处理程序之间切换，同时也支持一个回调函数。
$(selector).toggle(handler1, handler2, ..., handlerN);
selector：需要切换事件处理程序的元素，可以是任何选择器。
handler1、handler2、...、handlerN：每次触发事件时要执行的函数。只有两个处理程序时会切换，多个处理程序则依次循环执行。
以下代码演示了点击按钮时在两个处理程序之间切换：
$('#btn').toggle(function() {
console.log('第一个事件处理程序已执行');
}, function() {
console.log('第二个事件处理程序已执行');
});
点击按钮时会先触发第一个处理程序，再次点击则会触发第二个处理程序，依次循环执行。
推荐文章
您阅读本篇文章共花了：
发表评论