1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 03-jQuery-事件绑定【click() on()】 事件切换toggle() 事件方法 样式控制

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

时间:2023-10-09 16:49:38

相关推荐

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() 方法来实现事件处理程序的切换操作。

四、事件方法

五、样式控制

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。