jQuery(3)事件处理普通绑定、on、off、自动触发、事件对象

本文详细介绍了jQuery的事件处理机制,包括on()方法的事件绑定、off()方法的解绑操作,以及trigger()和triggerHandler()的事件触发。还涵盖了事件对象的使用和jQuery对象拷贝。同时讨论了多库共存和jQuery插件的运用。

1.2. jQuery 事件处理
为普通注册事件方法
在这里插入图片描述

因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下:

  • on(): 用于事件绑定,目前最好用的事件绑定方法
  • off(): 事件解绑
  • trigger() / triggerHandler(): 事件触发

1.2.1 事件处理 on() 绑定事件

因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
1.2.3. 事件处理 off() 解绑事件

当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ;

在这里插入图片描述

1.2.4. 事件处理 trigger() 自动触发事件

有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ; 

在这里插入图片描述在这里插入图片描述
1.3. jQuery 事件对象

jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

在这里插入图片描述

注意:jQuery中的 event 对象使用,可以借鉴 API 和 DOM 中的 event 。

1.4. jQuery 拷贝对象

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下。

语法

在这里插入图片描述

1.5. jQuery 多库共存

实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为,jQuery 多库共存。

在这里插入图片描述

1.6. jQuery 插件

jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入

jQuery文件,因此也称为 jQuery 插件。

jQuery 插件常用的网站:

  1. jQuery 插件库 http://www.jq22.com/
  2. jQuery 之家 http://www.htmleaf.com/
    jQuery 插件使用步骤:
  3. 引入相关文件。(jQuery 文件 和 插件文件)
  4. 复制相关html、css、js (调用插件)。

插件的使用三点: 1. 引入css. 2.引入JS 3.引入html。 (有的简单插件只需引入html和js,甚至有的只需引入js)

1.8. 今日总结
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值