`
zhouyrt
  • 浏览: 1163399 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

读jQuery之十(事件模块概述)

 
阅读更多

 

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个添加事件的快捷方法

 

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error").split(" "), function( i, name ) {
 
    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        if ( fn == null ) {
            fn = data;
            data = null;
        }
 
        return arguments.length > 0 ?
            this.bind( name, data, fn ) :
            this.trigger( name );
    };
 
    if ( jQuery.attrFn ) {
        jQuery.attrFn[ name ] = true;
    }
});

 如下图

 

记住,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触发事件模块的核心。如图

 

 

  • 大小: 16.2 KB
  • 大小: 37.7 KB
  • 大小: 28.1 KB
  • 大小: 7.1 KB
  • 大小: 8.1 KB
分享到:
评论
1 楼 mu0001 2012-04-24  
1.7之后,所有都绑在on()上了?

相关推荐

    读jQuery之十 事件模块概述

    本篇将重点探讨jQuery的事件模块,这个模块不仅仅是对事件对象的简单包装,它还解决了不同浏览器间的兼容性问题,提供了一套更为统一和强大的事件处理接口。 ### 1. jQuery事件模块基础 在jQuery中,事件处理是...

    jQuery技术内幕 深入解析jQuery架构设计与实现原理

     《jquery技术内幕:深入解析jquery架构设计与实现原理》在分析每个模块时均采用由浅入深的方式,先概述功能、用法、结构和实现原理,然后介绍关键步骤和分析源码实现。让读者不仅知其然,而且知其所以然。事实上,...

    jquery类库各版本综合

    **jQuery库概述** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。自2006年首次发布以来,jQuery迅速成为了Web开发的标准工具之一,因其简洁的API和强大的功能而...

    jQuery开发的轻量级门户(Portal)框架

    2. **拖放(Drag & Drop)**:利用jQuery UI的拖放功能,jPolite实现了模块的自由移动,用户可以轻松调整界面布局。 3. **保存/加载布局**:用户可以保存当前的布局配置,并在后续访问时加载,确保个性化设置的持久化...

    目前最新 jquery 3.2

    4. **模块化**:随着ES6模块的普及,jQuery 3.2也开始支持模块化导入,方便在现代构建工具中灵活使用。 二、压缩版与非压缩版的区别 在下载jQuery 3.2时,通常会提供两种版本:压缩版(min.js)和非压缩版(js)。...

    jQuery 3.2.1 下载包

    2. **通过模块化工具**:如果您的项目使用了模块化工具(如 Webpack 或 Rollup),则可以在配置文件中引入 jQuery。 ```javascript import $ from 'jquery'; ``` 3. **通过 AMD/CommonJS 规范**:对于遵循 AMD 或...

    tabs选项卡Jquery插件

    JQuery插件是开发者为了扩展JQuery核心功能而编写的代码模块。它们通常包含一些预定义的方法和配置选项,以实现特定的UI组件或增强网站功能。JQuery插件易于使用,只需要在页面中引入JQuery库和插件脚本,然后调用...

    jquery和js核心api

    **jQuery和JavaScript核心API概述** 在Web开发领域,jQuery和JavaScript是两个不可或缺的工具,它们极大地简化了HTML文档操作、事件处理、动画效果以及Ajax交互。这个压缩包包含"JavaScript核心参考手册.chm"和...

    Pro SharePoint with jQuery.pdf

    - **选择jQuery的原因**:作者指出,在2009年时,jQuery因其灵活性、丰富的功能集以及易于上手等特点而被选中作为解决SharePoint客户端问题的技术之一。 - **遇到的挑战**:作者分享了他们在将jQuery与SharePoint...

    jquery-officebar

    一、jQuery OfficeBar概述 "jQuery OfficeBar"是一个精心设计的jQuery插件,旨在为网页应用提供类似Office风格的工具栏。这个工具条具有清晰的布局、丰富的功能和高度的自定义性,使得用户能够快速访问各种操作选项...

    RIA应用开发:8-jQuery插件概述.ppt

    jQuery插件是开发者为了增强和扩展jQuery功能而编写的代码模块,使得这些功能可以被方便地复用和维护。 ### 插件的种类 1. **封装全局函数的插件**:这类插件将独立的函数添加到jQuery命名空间下,如`jQuery.ajax...

    浅析JQuery框架及其插件应用

    #### 一、jQuery框架概述 JQuery,一个由美国程序员John Resig创建的JavaScript库,自诞生以来迅速成为全球开发者钟爱的工具之一。它以“写得少,做得多”(WRITELESS,DOMORE)的理念著称,旨在帮助开发者用更少的...

    jquery 基础教程 pdf

    ### jQuery基础教程知识点详解 #### 一、jQuery技术框架概览 **1.1 jQuery的起源与发展** - **创建者**: John Resig在2006年初创建了jQuery。 - **最新版本**: 截至资料所述时,最新版本为1.3.2。 - **官方...

    《精通jQuery 第2版》完整版.pdf

    - **模块化开发**:教授如何将大型项目拆分为多个模块,并使用jQuery进行有效管理的方法。 - **跨浏览器兼容性**:讲解如何解决不同浏览器间的差异问题,确保代码在各种环境下均能正常运行。 综上所述,《精通...

    jqueryUI demo

    **jQuery UI 概述** jQuery UI 是一个开源的 JavaScript 库,它基于广泛使用的 jQuery 库,为开发者提供了丰富的用户界面组件和交互效果。这个库旨在简化网页开发,通过简单的 API 能够实现复杂的界面设计,包括...

    JQuery源码的奥秘逐行分析视频教程

    自2006年发布以来,JQuery 成为了最流行的前端库之一,并在很长一段时间内被广泛应用于各类网站开发项目中。 #### 课程概述 本课程为某学院 VIP 课程系列的一部分,主要针对对 JQuery 内部机制感兴趣的开发者或希望...

    基于jquery的Ajax后台模板框架

    为了实现动态交互,框架可能会利用jQuery的事件监听功能,如$(selector).on('click', function() {...}),对用户的操作做出响应。例如,点击按钮触发Ajax请求,更新表格数据。 ### 6. 自定义扩展与模块化 虽然框架...

Global site tag (gtag.js) - Google Analytics