资讯专栏INFORMATION COLUMN

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

Airy / 1040人阅读

摘要:前端最基础的就是。帮助从旧的事件方法转换,和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称,命名空间,处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。

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

主要内容

jQuery 事件(绑定,解绑,委托,触发)

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")

其他事件类支持

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

hover([over,]out) 绑定鼠标hover效果。封装好的mouseovermouseout

事件封装,我基本都不用。只用on off

jQuery 链式操作

链式操作真的爽。比如ES6new Array(10).fill(1).map((v,i)=>i*2) 我们可以让我的数据经过好几个方法处理一下。
原理其实也比较简单,因为jQuery重点就是封装了DOM,所有的都伪装成数组。让我们很方便的遍历。然后他在每次操作完之后把thisreturn了出来

例子: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

初级阶段文章目录

前端培训-初级阶段(17) - 数据存储(cookie、session、stroage)

前端培训-初级阶段(13) - 正则表达式

前端培训-初级阶段(13) - 类、模块、继承

前端培训-初级阶段(13) - ECMAScript (内置对象、函数)

前端培训-初级阶段(13) - ECMAScript (语法、变量、值、类型、运算符、语句)

前端培训-初级阶段(13、18)

前端培训-初级阶段(9 -12)

前端培训-初级阶段(5 - 8)

前端培训-初级阶段(1 - 4)

中级阶段文章目录

前端培训-中级阶段(2) - 事件(event) 事件冒泡、捕获 - (2019-06-20期)

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

前端培训-中级阶段(4)- BOM 浏览器对象模型(2019-07-04期)

前端培训-中级阶段(5)- jQuery的概念与基本使用(2019-07-11期)

前端培训-中级阶段(6)- jQuery元素节点操作(2019-07-18期)

资料

前端培训目录、前端培训规划、前端培训计划

jQuery 速查地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54120.html

相关文章

  • 前端培训-中级阶段6)- jQuery事件绑定链式操作原理2019-07-25

    摘要:前端最基础的就是。帮助从旧的事件方法转换,和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称,命名空间,处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS)...

    sutaking 评论0 收藏0
  • 前端培训-中级阶段(11、12)- 跨域请求原理实现(2019-08-22

    摘要:上节我们讲了同源策略,这节我们讲讲如何跨域。当这些从的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每...

    binaryTree 评论0 收藏0
  • 前端培训-中级阶段(10)- 同源策略(2019-08-15

    摘要:同源策略是什么同源策略是浏览器的一个安全功能,不同源的数据禁止访问。或许你可以说验证,在浏览器没有同源策略的情况下这些都可以绕过去。总结同源策略是蛮好的,防御了大部分的攻击。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思...

    heartFollower 评论0 收藏0
  • 前端培训-中级阶段(8)- jQuery元素属性样式操作2019-08-01

    摘要:前端最基础的就是。对应,是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,...

    everfly 评论0 收藏0
  • 前端培训-中级阶段(8)- jQuery元素属性样式操作2019-08-01

    摘要:前端最基础的就是。对应,是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,...

    james 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<