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

栏目: jQuery · 发布时间: 5年前

内容简介:前端最基础的就是我比较习惯直接使用

前端最基础的就是 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效果。封装好的 mouseovermouseout
  3. 事件封装,我基本都不用。只用 on off
    前端培训-中级阶段(6)- jQuery的事件绑定链式操作及原理(2019-07-25期)

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

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

微信公众号:前端linong

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Tango with Django

Tango with Django

David Maxwell、Leif Azzopardi / Leanpub / 2016-11-12 / USD 19.00

Tango with Django is a beginner's guide to web development using the Python programming language and the popular Django web framework. The book is written in a clear and friendly style teaching you th......一起来看看 《Tango with Django》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码