一、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('第二个事件处理程序已执行');
});
点击按钮时会先触发第一个处理程序,再次点击则会触发第二个处理程序,依次循环执行。