读jQuery之十 事件模块概述_jquery

后面会详细分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。

虽然事件模块代码很难读，但其提供的API接口还是很清晰的。如下

1 添加事件(bind/one/live/delegate/hover/toggle)
bind 基本的添加事件函数。
one 添加只执行一次的事件函数。
live 事件代理（使用document代理）。
delegate 事件代理（使用指定元素代理）。
hover 模拟css的hover。
toggle 显示/隐藏。

bind/one/live 都是使用内部的jQuery.event.add 来完成事件添加。
delegate 内部调用的是live。
hover 内部使用mouseenter/mouseleave，而mouseenter/mouseleave又使用bind。
toggle 内部使用click，而click内部又调用的是bind。

实际上jQuery的一个each调用就给jQuery对象上增加了24个添加事件的快捷方法
如下图

如下图

记住，bind调用的是jQuery.event.add，因此 jQuery.event.add 才是整个jQuery添加事件模块的核心。以上所有的方法都是在其之上构建的上层应用。如图

2 删除事件 (unbind/die/undelegate)

unbind 删除事件基础方法。可以删除一个指定handler，还可以删除某类型事件的全部handler，甚至可以删除挂在element上的全部事件。其内部调用jQuery.event.remove。

die/undelegate 删除事件代理。 内部都使用unbind。

因此， jQuery.event.remove 才是整个jQuery删除事件模块的核心。unbind/die/undelegate都是在其之上构建的上层应用。如图

3 触发事件(trigger/triggerHandler)

trigger 触发一个事件（会冒泡）

triggerHandler 触发一个事件（不会冒泡）

trigger/triggerHandler 内部调用的都是jQuery.event.trigger，因此jQuery.event.trigger 才是整个jQuery触发事件模块的核心。如图

时间： 2024-08-03 00:48:20

读jQuery之十 事件模块概述_jquery的相关文章

读jQuery之十四 （触发事件核心方法）_jquery

在 事件模块的演变 我使用了dispatchEvent(标准) 和fireEvent(IE)来主动触发事件.如下 复制代码 代码如下: ... dispatch = w3c ? function(el, type){ try{ var evt = document.createEvent('Event'); evt.initEvent(type,true,true); el.dispatchEvent(evt); }catch(e){alert(e)}; } : function(el, typ

读jQuery之六 缓存数据功能介绍_jquery

很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 复制代码 代码如下: <div data="some data">Test</div> <script> div.getAttribute('data'); // some data </script> 给页面中div添加了自定义属性"data"及值"some data".后续JS代码中使用getAttribute获取. jQuer

jQuery中change事件用法实例_jquery

本文实例讲述了jQuery中change事件用法.分享给大家供大家参考.具体分析如下: change事件会在匹配元素失去焦点或者其值获得焦点并且改变时触发. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序.可以通过change()方法为change事件绑定事件处理程序.例如: 复制代码 代码如下: $("input").change(function(){$("input").css("backgroundColor",&

jQuery中mouseover事件用法实例_jquery

本文实例讲述了jQuery中mouseover事件用法.分享给大家供大家参考.具体分析如下: 当鼠标指针位于匹配的元素上方或者调用mouseover()方法时触发mouseover事件. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序. 可以通过mouseover()方法为mouseover事件绑定事件处理程序.例如: 复制代码 代码如下: $("div").mouseover(function(){$("div").text("欢

jQuery中click事件用法实例_jquery

本文实例讲述了jQuery中click事件用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序. 可以通过click()方法为click事件绑定事件处理程序.例如: 复制代码 代码如下: $("button").click(function(){$("div").css("color",

JQuery自动触发事件的方法_jquery

本文实例讲述了JQuery自动触发事件的方法.分享给大家供大家参考.具体如下: 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使用下面的代码来触发id为btn的按钮的click事件. $('#btn').trigger("click"); 这样,当页面加载完毕后,就会立刻输出想要的效果.也可以直接简写click(),来达到同样的效果:

jQuery中ready事件用法实例_jquery

本文实例讲述了jQuery中ready事件用法.分享给大家供大家参考.具体分析如下: 此事件会在文档加载就绪以后触发,也就是当DOM对象已经加载,并且网页内容全部呈现时候触发. ready()方法可以为ready事件绑定事件处理方法,并且此方法的选择器是唯一的,那就是document对象.语法形式有三种,后两种是第一种的简写. 语法结构:语法一: 复制代码 代码如下: $(document).ready(function) 语法二: 复制代码 代码如下: $().ready(function)

jQuery实现自定义事件的方法_jquery

本文实例讲述了jQuery实现自定义事件的方法.分享给大家供大家参考.具体分析如下: jQuery是一个非常强大的工具.jQuery非常有用的功能之一是可以实现事件绑定.你可以实现创建,绑定事件,可触发自己定义的jQuery事件. 自定义事件触发 下面的代码是它自定义事件触发.你可以绑定到这个自定义事件. $event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. $(this).bind("

读jQuery之十二 删除事件核心方法_jquery

.remove 所作的事情与上一篇提到的.add 刚好相反.且与.add中的处理代码一一对应,即  .add 中有多少种添加事件的方式.remove就有对应的删除方式. .remove 定义了四个参数 elem, types, handler, pos .从字面上看四个参数的意义很明了 elem 为HTMLElement types 为String类型,事件名称如'click'或'mouseover mouseout'   handler 为Function类型,事件回调函数 pos 为Numb