首页
学习
活动
专区
圈层
工具
发布

jQuery的事件模型

前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓存系统。...jQuery的第一代缓存是直接将数据存储在 缓存体 这个数据结构中,但是需要在元素上添加一个uuid来作为标示, 标记在缓存体中的位置。...所以jQuery第二代缓存系统应运而生,这次不对元素进行添加属性,而是判断元素的valueOf()方法的返回值,如果没有返回值是 对象,则说明缓存体中并没有该元素的缓存数据,进而使用ECMA5的Object.defineProperty...简单讲述了缓存系统,现在着重讲解下jQuery的事件系统: 主要使用了几个数据结构,即元素的缓存体,Event构造函数,和Handler构造函数。   ...其次就是对fn的封装,在库中,fn的包装函数 实现了新事件对象的创建,以及对新创建的事件对象的修补,并调整了在回调中this的指向。

1.2K80

jquery的事件&动画

一、事件 在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法 1、.on( events...click", "click.name1", 或者 ".myname" 参数2selector:一个选择器字符串,用于过滤和选中能触发事件的后代元素 参数3data:当一个事件被触发时,要传递给事件处理函数的...,所谓的命名空间就相当于给这个事件命名,我删除事件的时候就只删除对应这个,不会误伤这个事件类型的其他事件 $('.box li').on('click.hello', function(){ var...jQuery提供"linear(线性)" 和 "swing(旋转)" 参数3:完成后执行的函数 $('.target').hide(); $('#book').hide(300, 'linear',...,jquery提供了自定义动画行为的方法 1、.animate( properties [, duration ] [, easing ] [, complete ] ) 官方文档 参数一:properties

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

    jQuery:详解jQuery中的事件(一)

    当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。当然使用传统的JavaScript也能完成这些交互,但是jQuery增加兵扩展了基本的事件处理机制。...jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。   ...jQuery的$(document).ready()方法就可以很好的解决这种问题——每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行...//下面的jQuery代码就可以顺序执行上面的两个函数,并且如果还有其他的绑onload函数也可以这样绑定 $(document).ready(function(){ func1(); }); $(...明天继续完成jQuery事件的下半部分,包括的内容有合成事件、事件冒泡、移除事件等内容。

    2.8K20

    jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。   ...接上篇jQuery:详解jQuery中的事件(一)   3、合成事件   jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法...*这里要注意的一点是,jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover"...)和bind("mouseout"),那么这两对绑定函数,其实是两对事件是什么区别呢?...就上面的简单描述,已经可以看出问题所在了,那就是会出现意想不到的click事件,所以需要对事件作用范围进行限制。   jQuery有三种办法可以解决事件冒泡导致的问题。

    3.6K30

    jQuery中的$是什么

    但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为$是JS的什么特殊语法。...做网站的时候碰到一个问题就是JS脚本存放的位置不同其效果不同。 用简单的一句话介绍就是加载顺序的问题。...如果放入head,那当页面加载head部分的时候,那个控件都还没有被定义(也可以说是还没有被加 载,因为加载的过程就是执行代码的过程,包括了定义),你能得到的只可能是一个undefind。...这里比如制作鼠标跟随事件,肯定只有当页面加载后再进行对鼠标坐标的计算。或者是filter滤镜与javascript的联合使用产生的图片淡入淡出效果等。...这里比如制作鼠标跟随事件,肯定只有当页面加载后再进行对鼠标坐标的计算。

    1.9K20

    Windows 窗体中的事件顺序

    ,Windows 窗体应用程序中引发事件的顺序非常具有吸引力。...当出现需要谨慎处理事件的情况时(例如,在重绘窗体的某些部件时),有必要了解运行时引发事件的确切顺序。 本主题提供了应用程序和控件的生存期中几个重要阶段中的事件顺序的详细信息。...有关鼠标输入事件的顺序的特定详细信息,请参阅Windows 窗体中的鼠标事件。Windows 窗体中的事件的概述,请参阅事件概述。 有关事件处理程序的构成的详细信息,请参阅事件处理程序概述。...Windows 窗体应用程序启动时,主窗体的启动事件将按照以下顺序引发: Control.HandleCreated Control.BindingContextChanged Form.Load...Control.VisibleChanged Form.Activated Form.Shown 应用程序关闭时,主窗体的关闭事件将按照以下顺序引发: Form.Closing

    2K20

    java事件总线是什么?事件总线的优势是什么?

    事件总线对于用户来说非常之常见,另外事件总线的实现有很多种方式,我们可以通过java来实现事件总线,实际上操作起来也是比较简单的。...但是需要注意的是,一般java实现事件总线都是建立在观察者模式的基础上的。今天主要为大家介绍一下,到底java事件总线是什么?如果有兴趣可以通过下文做一个了解。 java事件总线是什么?...首先我们需要了解事件总线是什么,它其实就是一种通信方式,可以将它看作是一个桥梁,它能够实现很多通信。例如事件订阅、事件监听和事件发布和存储等等。从功能上来说事件总线是具有非常大的优势的。...观察者模式就是实现发布或者订阅的功能需求,多个观察者可以同时监听一个对象,对象的状态和内容发生改变会给所有的观察者发送信息,这样它们可以实现自动更新。 事件总线的优势是什么?...关于java事件总线是什么,我们在上文做了一些简单的介绍,希望可以帮助大家了解事件总线。同时也会大家介绍了事件总线的优势所在。

    1.4K10

    JQuery 对控件的事件操作

    对于控件的事件,jQuery已经提供了丰富的方法,包括绑定、一次绑定、触发等,阿拉今早看看叫一哪能用额伐,大虾路古就可以了。...jQuery的绑定事件非常方便,有bind、live、one还有它帮你把一些常用的事件给单独了出来,比如控件的onclick事件,我们绑定onclick事件的时候只需要 $("#testButton")...jQuery有unbind的方法,专门来取消绑定的,也就是取消事件,按照上面的例子的话,应该使用: $("#testButton").unbind("click"); 恩,看上去非常好,如果你的...我这里取消了绑定,又删除了特定的绑定,为什么还会执行Eat呢? 其中的原由要看jQuery的类库了,我估计它只删除了通过JQuery绑定的那些事件了,呵呵。 那这时候我们该如何呢?...好在jQuery有很多方法,其中一个就是attr,他是对Dom元素的属性进行操作,我们利用attr来消除input上的click事件。

    2.3K60

    JQuery的属性操作及事件

    (不会更改DOM结构),但是该属性是存在的,且可以获取输出②attr():在元素本身是可以看到设置的属性,也可以获取输出二、遍历操作1、区别(1)隐式迭代:给同一类元素做同样的操作(2)遍历操作:给同一类元素做不同的事情...(jQuery 事件 | 菜鸟教程)1、单个事件注册element.事件(fuction(){})(1).hover:模仿鼠标悬停事件(2)参数        ①函数1:鼠标移上去触发什么事件        ...②函数2:鼠标离开触发什么事件事件$('选择器').on('类型',fuction(){})(1)优点一:可以绑定多个函数,处理相同或不同的程序①处理相同的程序 $('button').on('click...('仅一次');})5、自动触发事件$('button').click()五、插件jQuery插件库-收集最全最新最好的jQuery插件小伙伴可以在这个网站找喜欢的作品,下载压缩包后,可以直接看效果,而且都有源码的哦

    2.2K70

    jQuery键盘事件的应用【jQuery框架应用入门13】

    键盘按键事件主要分为键盘的按下过程和键盘的弹起过程。常见键盘事件如表5-4所示。...表5-4键盘按键事件 键盘事件 说 明 keydown 当键盘按下时第一个发生的事件,对所有按键有效 keypress 当键盘按下时第二个发生的事件,对中文和特殊按键无效 keyup 当键盘弹起时发生的事件...对整个页面上下文分别做了三个键盘事件的绑定,先打开chrome浏览器的console窗体,然后在文本框中随意输入一个英文字母或数字时,就可以看到这个在三个键盘事件的执行顺序,如图5-14所示。...图5-15按下中文按键测试 在jQuery中,如果你要获取键盘输入的是什么按键,那么可以利用事件参数的which属性即可(event.which)。...a,此时在console窗体中的keydown事件中显示的却是大写字母A对应的ascii码值65,而在keypress事件中显示的是正确的小写字母a对应的ascii码97。

    69110

    WPF 多个 StylusPlugIn 的事件触发顺序

    如果在 WPF 使用 StylusPlugIn 同时在同一个界面用多个元素都加上 StylusPlugIn 那么事件触发的顺序将会很乱 我建议是不要让 StylusPlugIn 有重叠,在没有理解 StylusPlugIn...对同容器内两个重叠元素,将会同时触发两个元素的 StylusPlugIn 事件,不同的是在最底层的元素将会在触摸线程触发,而在最上层的元素将会是主线程触发 ?...对同容器内多个重叠元素,将知道最上层和最底层的元素会触发事件,不同的是在最底层的元素将会在触摸线程触发,而在最上层的元素将会是主线程触发 ?...而这个字段的添加是依赖于视觉树添加的顺序,这也就是本文开始告诉大家的,不要做出重叠的原因 关于 _plugInCollectionList 字段是如何添加的,将会在下文说到,现在回到开始的问题 在触摸线程...方法,在这个方法将会决定添加的 StylusPlugIn 所在字段的顺序,因为在通过命中测试获取点击到的元素是按照字段列表的顺序获取,返回第一个满足的元素。

    1.3K30

    ajax 和 js 事件的执行顺序

    有一个需求,滚轮滚动到相应位置的时候执行当前的动画,这个动画在footer里面,而网页的主体通过ajax进行渲染,我在js里面调用ajax渲染数据,然后再获取主体的高度,滚动到该高度的时候执行动画。...放在服务器上测试发现无论怎么写,都是先获取主体的高度,然后才进行数据的渲染。那么必然高度是一个极小的值,不符合我想要的属性。...让获取高度的事件时间延时500ms,发现最后获取不到事件了; 将该事件写在ajax的success回调里面,结果是只有打开网页第一次能够成功,然后不管刷新多少次均无效,事件被屏蔽,所以方法二也被废除;...最后我想到了,ajax不就是一种异步方法,我将其改为同步不就行,先让ajax执行完在执行js事件。...当然这样做有弊端的,如果接口出问题,ajax渲染失败,那么整个网页的js都将执行不了。不过我想真到了数据都渲染不出的地方,访问网页就没有意义了,所以最后我采用了这种方法。

    3.7K30

    WPF 多个 StylusPlugIn 的事件触发顺序

    如果在 WPF 使用 StylusPlugIn 同时在同一个界面用多个元素都加上 StylusPlugIn 那么事件触发的顺序将会很乱 我建议是不要让 StylusPlugIn 有重叠,在没有理解 StylusPlugIn...,而蓝色代表附加StylusPlugIn元素 对同容器内两个重叠元素,将会同时触发两个元素的 StylusPlugIn 事件,不同的是在最底层的元素将会在触摸线程触发,而在最上层的元素将会是主线程触发...对同容器内多个重叠元素,将知道最上层和最底层的元素会触发事件,不同的是在最底层的元素将会在触摸线程触发,而在最上层的元素将会是主线程触发 如果是一个附加 StylusPlugIn 的容器,包含一个附加...而这个字段的添加是依赖于视觉树添加的顺序,这也就是本文开始告诉大家的,不要做出重叠的原因 关于 _plugInCollectionList 字段是如何添加的,将会在下文说到,现在回到开始的问题 在触摸线程...方法,在这个方法将会决定添加的 StylusPlugIn 所在字段的顺序,因为在通过命中测试获取点击到的元素是按照字段列表的顺序获取,返回第一个满足的元素。

    1.3K20

    JavaScript 事件委托 以及jQuery对事件委托的支持

    jquery 对事件委托的支持 在jQuery里对事件委托的支持,有以下几个函数: ?...delegate(selector,[type],[data],fn) jquery 的delegate 方法是典型的为事件委托准备的。...fn   : 相应的处理函数 描述:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。...备注: 自jQuery1.9后 就废除这个函数,只能在jQuery1.9以前的版本中使用。...第二,理论上委托会导致浏览器额外的加载,因为在容器内的任意一个地方事件的发生,都会运行事件处理函数,所以多数情况下事件处理函数都是在空循环(没有意义的动作),通常不是什么大不了的事儿。

    1.4K60

    TTP事件总线的全称是什么?事件总线优势是什么?

    TTP指的是一种常见的通信协议,它可以帮助实现总线,如今已经具有非常成熟的商业性质。接下来为大家详细介绍TTP事件总线的全称是什么,请继续阅读。 TTP事件总线的全称是什么?...所有的组件会有一个共用的事件中心,组件可以向这个中心发送事件,也可以对它进行事件的接收。各个组件之间可以实现便捷通信,这就是事件总线的意义所在。...组件之间的通信可以用多种方式解决,而如果两个组件之间不是父子组件或者兄弟组件,那么事件总线是一个非常好的解决方案。 事件总线优势是什么?...不论是发布者还是订阅者,都可以实现数值的传输。事件总线提供了完整的事件注册和触发接口。 TTP事件总线的全称是什么?以上内容是我们提供的解答。...事件总线在我们工作中是越来越常见了,它的操作还是比较简单的。但是事件总线也是需要不断完善的,这样才能让它的优势得到更好的发挥。如果还有其他疑问,可以在站内继续阅读其他内容。

    1.6K20
    领券