jQuery学习手册(18)

本文介绍了jQuery中的事件绑定方法,包括eventName和on的区别及使用场景,事件解绑的off方法的不同用法,以及如何阻止事件冒泡和默认行为。此外还探讨了事件自动触发的方式、自定义事件的创建、事件命名空间的概念、事件委托的应用、移入移出事件的区别等。

jQuery两种绑定事件的方式

  1. eventName(fn)

    $('button').click(function() {
    ​        alert('hello word')
    ​      })
    

    编码效率略高,部分事件jQuery没有实现,所以不能添加

  2. on(eventName,fn)

     $('button').on('click', function() {
                    alert('helloo')
                })
    

    编码效率略低,所有js事件都可以添加

注意:可以添加多个相同或者不同的事件,不会覆盖

jQuery事件解绑

off()方法

  1. 如果不传递参数,会移除所有的事件
  2. 如果传递一个参数,会移除所有指定类型的事件
  3. 如果传递2个参数,会移除所有指定类型的指定事件

事件冒泡和默认行为

  1. 什么是事件冒泡

  2. 如何阻止事件冒泡

    event.stopPropagation()

  3. 什么是默认行为

  4. 如何阻止默认行为

    event.preventDefault()

事件自动触发

trigger:如果用trigger自动触发事件,会触发事件冒泡和默认行为

triggerHandler:如果利用triggerHandler自动触发事件,不会触发事件冒泡和默认行为

自定义事件

必须满足两个条件

  1. 事件必须是通过on绑定的
  2. 事件必须通过trigger来触发

事件命名空间

利用trigger触发子元素带命名空间的事件,那么父元素带相同命名空间的事件也会被触发

事件委托

请别人做事,将做完的结果反馈给我们

在jQuery中,如果通过核心函数找到的元素不止一格,那么在添加事件的时候jQuery就会遍历所有找到的元素,给所有找到的元素添加事件

jQuery移入移出事件

  1. mouseover
  2. mouseout

子元素被移入移出也会触发父元素的事件

  1. mouseenter
  2. mouseleave

子元素被移入移出不会触发父元素的事件,推荐使用

hover,两个function,表示移入和移出,一个function表示移入移出都执行

在jQuery中,如果需要执行动画,建议在执行动画之前先调用stop方法,然后再执行动画

自定义动画

  • 第一个参数:接收一个对象,可以在对象中修改属性
  • 第二个参数:指定动画时长
  • 第三个参数:指定动画节奏,默认就是swing
  • 第四个参数:动画执行完毕之后的回调函数
  • 在jQuery中的{}可以同时修改多个属性,多个属性的动画会同时执行

delay方法的作用就是用于高速系统延迟延时长

 $('div').stop(true,false)
 立即停止当前和后续所有动画
​        $('div').stop(false,true)
立即完成当前的,继续执行后续动画
   $('div').stop(true,true)
   立即完成当前的,并且停止后续所有的

在这里插入图片描述
每日一句
成功是别人失败时还在坚持。

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈工程师MrL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值