前端培训-中级阶段(6）- jQuery 的事件绑定链式操作及原理（2019-7-25期）

主要内容

1. jQuery 事件（绑定，解绑，委托，触发）

2. jQuery 链式操作

jQuery 事件

绑定事件 on(events,[selector],[data],fn)

我比较习惯直接使用$('div').on(events,fn)来实现绑定事件。

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，.bind(), .delegate(), 和 .live()。

events 可以用写多个事件，比如常见的input的兼容写法$('input').on('input propertychange', fn)。

对应原生addEventListener和ie等低版本的兼容。

jQuery 解绑事件 off(events,[selector],[fn])

我比较习惯直接使用$('div').off(events)来实现解绑事件。

off() 方法移除用.on()绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称，命名空间，处理函数。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序才会被删除。

$('.btn').off('click') 会把所有的click事件都移除。还记得我们原生的移除条件吗？removeEventListener必须把fn也传入进去才可以。那么jQuery怎么实现的呢？他把所有的事件都保存了起来，删除的时候使用保存的引用去删除。

jQuery 事件委托 on(events,selector,[data],fn)

原生的方法为判断event.target来实现。jQuery 封装之后通过传入selector来操作。

selector:用于过滤器的触发事件的选择器元素的后代。如果省略，当事件触发到达选定的元素，事件总是触发。

jQuery 事件触发、模拟触发 trigger(type,[data])

原生使用dispatchEvent触发。

例子：$("form:first").trigger("submit")

其他事件类支持

1. one() 绑定只触发一次的事件

2. hover([over,]out) 绑定鼠标hover效果。封装好的mouseover和mouseout

3. 事件封装，我基本都不用。只用onoff

jQuery 链式操作

链式操作真的爽。比如ES6的 new Array(10).fill(1).map((v,i)=>i*2) 我们可以让我的数据经过好几个方法处理一下。

原理其实也比较简单，因为jQuery重点就是封装了DOM，所有的都伪装成数组。让我们很方便的遍历。然后他在每次操作完之后把this又return了出来

例子：jsrun地址

//实现了一个，单击打开，移走变透明的效果。
$('#wrap').on('click', function(){
    window.open('https://www.lilnong.top')
}).on('mouseout', function(){
    $('#wrap').animate('opacity', .7)
}).on('mouseover', function(){
    $('#wrap').css('opacity', 1)
})

我们尝试自己来写一个可以链式操作的对象

obj={
   num: 0,
   clear: function(num){
    this.num= 0
    return this;
   },
   add: function(num){
    this.num+=num
    return this;
   }
}