首页 前端知识 03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制

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

2024-01-24 15:01:54 前端知识 前端哥 580 982 我要收藏

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/245.html
评论
发布的文章

String转Json的几种方式

2024-05-09 11:05:04

iOS ------ JSONModel源码

2024-05-09 11:05:02

java去除 json 中的 \n, \t, \r

2024-05-09 11:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!