jQuery学习手册（18）

Posted 2021-05-14 designbyly

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)
   立即完成当前的，并且停止后续所有的

每日一句
成功是别人失败时还在坚持。