首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery源码解析之click()的事件绑定

一、事件委托 DOM有个事件流特性,所以触发DOM节点的时候,会经历3个阶段: (1)阶段一:Capturing 事件捕获(从祖到目标) 在事件自上(document->html->body->xxx)...源码: //绑定事件的方法 //源码5812行 jQuery.fn.extend( { //在被选元素及子元素上添加一个或多个事件处理程序 //$().on('click'...jQuery.on() 方法: //绑定事件的on方法 //源码5143行 //目标元素,类型(click,mouseenter,focusin,xxx),回调函数function(){xxx...().off( event ); //在origFn运行一次的基础上,让origFn调用fn方法,arguments即event return origFn.apply(...事件,也就是说,click()/on() 的本质是 element.addEventListener() 事件,前面一系列的铺垫,都是在为目标 jQuery 对象添加必要的属性。

1.8K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jQuery源码研究:jQuery原型对象上的属性方法(上)

    ,jQuery对象作为构造函数,在其原型上定义了一些属性和方法,同时其原型也被指向jQuery对象的属性fn上面。...其中属性constructor指向构造器即jQuery对象。length属性默认值为0,为对象添加属性length,感觉这是要把对象作为类数组来处理,且看后续的代码阅读中能发现用在哪,暂时先不关注。...通过this把老的jQuery原型对象挂载到新建的ret对象的prevObject属性上云,这可以看作是jQuery对象的一个引用吧 7 ret.prevObject = this;...这个方法其实作用就是把元素集合添加到一个新的对象中,并且这个对象还具有jQuery对象的引用,所以也就是具有jQuery对象的所有方法和属性,链式调用起来妥妥的呀。...例如这个沙雕作法:向 jQuery 栈中先压入一些元素,然后再删除它们,之后再退回到之前刚压入栈的状态。

    1.1K40

    jQuery源码研究:jQuery对象及原型上的extend()方法

    jQuery对象的fn属性指针就指向jQuery对象的原型,并且因为对象都是引用类型的,所以上例代码的操作意思就是:在jQuery对象和它的原型对象上都添加extend方法,该方法最后返回的是一个合并处理后的对象...在jQuery对象上绑定的extend()和jQuery.fn上绑定的extend()方法其实是不同的,前者是类方法,是静态方法,调用方法写作$.extend();后者是实例方法,是成员方法,调用方法写作...,表示传参只传了一个对象参数,则方法return出来的target就是jQuery这个类对象本身。...通过这种方式,可以为全局对象jQuery扩展新的方法: $.extend({ //添加新的类方法 sum: function(a, b){ return a + b;...jQuery.fn即原型对象上添加extend()方法的代码解释,再复习下:jQuery对象和其原型上都具有extend()方法,区别在于一个是类方法,一个是成员方法,在使用场景上请注意。

    94130

    jQuery源码研究:jQuery原型对象上的属性方法(下)

    构造函数的实例对象,凡是jQuery对象原型上的方法,在实例对象中都可以被访问到的。...至于this.pushStack()方法中的参数,可以明显看到它是jQuery构造对象上定义了一个方法map,该方法内部具体实现尚未可知,因为还没读到那部分,但看参数传递可以大概知道,将新创建的元素集合和对新集合进行处理的回调函数传入进去了...这个思想很优雅~~~~ slice()方法:它的作用就是切割出一个新的类数组结果,却不会影响到原有数组值,注意,这里也是返回一个新的值,同样,也是用到了pushStack方法。...( 0 ); }, last: function() { return this.eq( -1 ); }, } 都是调用的jQuery原型对象上的eq()方法...,能够在同一个链条上对当前筛选状态进行回退初始状态后再继续进行其他筛选操作。

    87850

    jQuery原理(原型上的属性、方法)

    jQuery原型上的属性 kjQuery.prototype = { constructor: kjQuery, init: function (selector) {}, /...push: [].push, // 对实例中的元素进行排序 sort: [].sort, // 按照指定下标指定数量删除元素,也可以替换删除的元素 splice...) 所以也就相当于[].push.apply(this)将元素添加到对象身上 jQuery原型上的方法 toArray 把实例转换为数组返回 toArray: function () { return...,是jQuery类型的实例对象 first: function () { return this.eq(0); }, last:获取实例中的最后一个元素,是jQuery类型的实例对象 last:...function () { return this.eq(-1); }, each 遍历实例,把遍历到的数据传给回调使用 jQuery存在两个each方法,一个类方法,一个对象方法。

    97120

    angularJS之站在jQuery的肩膀上

    jQuery由一小撮对浏览器极其熟稔的极客负责抹平不同浏览器的差异,其他开发 者只需要基于jQuery进行开发,可以更好地关注业务实现,而不是把时间花在 适配不同的浏览器上。...开发者需要的API都挂接在这个对象上。 它其实是一个类工厂,负责将指定的DOM对象转化为jquery对象。...jQuery是一个库,库总是被动的,就像工具,应用的开发逻辑是你的,在 某一点上需要用一下工具,就用好了。...jqLite:向jQuery致敬 在DOM操作方面,没有人比jQuery做的更好。AngularJS以一种特殊的方式 向jQuery表达了敬意:内置精简版的jQuery - jqLite。...扩展的事件 jqLite还提供一个$destroy事件,当DOM对象被从DOM树删除时,AngularJS将触发 这个事件,以便指令进行一些善后清理工作。

    88810

    删除GitHub上的历史commit

    -m "更新水印,从头做起"删除原来的分支(默认是master,也有可能是main)git branch -D master把当前分支重命名为主分支 git branch -m master强行推送到远程仓库...风险代码丢失: 删除历史 commit 可能会导致一些代码丢失,这可能会影响到项目的完整性和可用性。团队合作受影响: 如果多个人在同一个分支上工作,删除 commit 可能会影响到其他人的工作。...如果其他人使用被删除的 commit 进行工作,他们可能会遇到错误,这可能会导致协作的停滞和沟通的困难。Git 历史记录混乱: 删除 commit 可能会导致 Git 历史记录变得混乱不清。...如果您不小心删除了重要的 commit,您可能会失去对项目演变的完整历史记录。这可能会导致对项目的分支、合并和代码审查的跟踪困难。...代码库中的依赖关系受到影响: 如果项目中的其他组件依赖于被删除的 commit,删除 commit 可能会导致依赖关系的破坏。这可能会导致其他组件无法正常工作,或者可能需要花费大量的时间来修复问题。

    49630

    类编程的WAF(上)

    传统意义上的规则,其实质形式是独立的一行行文本,每行文本有固定的结构/字段,可以独立地描述出一个功能。对用户而言,书写规则就是设置其中的参数和选项。...事实上,由于代码的无限可能性,甲写的代码乙很难理解。为解决上述问题,必须要有一套程序框架,而框架本身的编写、配置和使用又成了问题。 有没有一种方法,不需要使用编程语言,而又能灵活满足复杂的需求呢?...四、类编程的WAF 天存信息的类编程 WAF,用数据结构来表达程序思想,让普通的技术支持人员也能够写出足够复杂和灵活的安全策略。...类编程的 WAF 具有以下与编程语言相似的特性: 无限嵌套的 if / the / else 条件判断 完整的 and / or / not 逻辑运算符 对集合 / 数组成员的遍历运算 变量包含多种数据类型...) 来约束,使得写出的类程序易读且统一,甚至做到可视化呈现。

    73130

    类的封装,类内的方法装饰器,类的方法修改与删除装饰器,经典类和新式类

    __name) #会报错,类外面没法直接引用类里面隐藏的变量 #我们如果直接用类来引用这个变量 #所有我们真的要拿里面的变量的话 prnt(a....__two() a = YwY() a.func() 2.类的方法修改与删除装饰器 1....# 自动执行 @price.deleter 修饰的 price 方法 3.注意 经典类中的属性只有一种访问方式,其对应被 @property 修饰的方法 新式类中的属性有三种访问方式,并分别对应了三个被...@property、@方法名.setter、@方法名.deleter 修饰的方法 由于新式类中具有三种访问方式,我们可以根据它们几个属性的访问特点,分别将三个方法定义为对同一个属性:获取、修改、删除...3.类的方法绑定 # 对象的绑定方法:没有加任何装饰的方法就是对象的绑定方法 # 类的绑定方法:加了@classmethod装饰器的方法就是类的绑定方法,里面的形参必须是cls而不是self,约定俗称

    1.2K30

    python测试开发django-167. jQuery中append() 动态新增的元素 click 事件无效的解决办法

    前言 使用append新增的div元素,绑定click事件无效的几种解决办法 遇到问题 绑定select下拉框click事件 // 绑定select下拉框click事件...}) 新增的div上点击事件没监听到 主要原因是事件是在 dom 加载的时候就已经完成了,新增的 div 元素 click 事件就无效了。...}) 看到网上很多都是用的live方法,但是会报错:TypeError: $(…).live is not a function 主要原因是jquery中的live()方法在jquery1.9...使用on 接下来还是使用on的方法,把点击事件绑定到它父元素上,这样就可以了 // 绑定select下拉框click事件 $('#cards').on('click',...}) 最通用场景是click事件绑定到document上,这样就使用任何情况了 // 绑定select下拉框click事件 $(document).

    91620

    房上的猫:StringBuffer类

    一.使用StringBuffer类  StringBuffer类位于java.lang包中,是String类的增强类  步骤:   1.声明StringBuffer对象并初始化 StringBuffer...操作符完成 二.常用的StringBuffer类方法  1. 字符串.toString();   //将StringBuffer类型的字符串转换为String类型对象并返回  2....字符串1.append(字符串2);   //将字符串2连接到字符串1后并返回   //该方法和String类的concat()方法一样都是把一个字符串追加到另一个字符串后面,所不同的是String中只能将...String类型的字符串追加到一个字符串后,而StringBuffer可以将任何类型的值追加到字符串之后  3....字符串.insert(位置,参数);   //将参数插入字符串的指定位置(int类型)后并返回   //参数可以是包括String的任何类型

    818150
    领券