前端培训中级阶段6-jQuery的事件绑定链式操作及原理20190725期

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

主要内容

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. 事件封装，我基本都不用。只用on off
   

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;
   }
}

微信公众号：前端 linong

初级阶段文章目录

1. 前端培训 - 初级阶段（17）– 数据存储（cookie、session、stroage）
2. 前端培训 - 初级阶段（13）– 正则表达式
3. 前端培训 - 初级阶段（13）– 类、模块、继承
4. 前端培训 - 初级阶段（13）– ECMAScript（内置对象、函数）
5. 前端培训 - 初级阶段（13）– ECMAScript（语法、变量、值、类型、运算符、语句）
6. 前端培训 - 初级阶段（13、18）
7. 前端培训 - 初级阶段（9 -12）
8. 前端培训 - 初级阶段（5 – 8）
9. 前端培训 - 初级阶段（1 – 4）

中级阶段文章目录

1. 前端培训 - 中级阶段（2）– 事件(event) 事件冒泡、捕获 –（2019-06-20 期）
2. 前端培训 - 中级阶段（3）– DOM 文档对象模型（2019-06-27 期）
3. 前端培训 - 中级阶段（4）- BOM 浏览器对象模型（2019-07-04 期）
4. 前端培训 - 中级阶段（5）- jQuery 的概念与基本使用（2019-07-11 期）
5. 前端培训 - 中级阶段（6）- jQuery 元素节点操作（2019-07-18 期）

资料

1. 前端培训目录、前端培训规划、前端培训计划
2. jQuery 速查地址