03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制

一、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('第二个事件处理程序已执行');
});

点击按钮时会先触发第一个处理程序，再次点击则会触发第二个处理程序，依次循环执行。

除了上述用法外，toggle() 方法还支持传递一个回调函数作为参数，该函数会在所有处理程序执行完毕后被调用。例如：

$('#btn').toggle(function() {
  console.log('第一个事件处理程序已执行');
}, function() {
  console.log('第二个事件处理程序已执行');
}, function() {
  console.log('所有处理程序已完成');
});

当每个处理程序执行完毕后，会触发最后一个回调函数。

需要注意的是，toggle() 方法在 jQuery 版本 1.9 之后已被废弃，推荐使用更加灵活的 on() 方法来实现事件处理程序的切换操作。

四、事件方法 

五、样式控制

代码007普通

打赏 收藏 海报 链接