在上一篇《jQuery学习-事件之绑定事件(二)》我们了解了jQuery的dispatch方法,今天我们来学习下handlers

方法:

handlers: function( event, handlers ) {

        var sel, handleObj, matches, i,

            handlerQueue = [],

            delegateCount = handlers.delegateCount,

            cur = event.target;//绑定委托事件的元素

        // Find delegate handlers

        // Black-hole SVG <use> instance trees (#13180)

        // Avoid non-left-click bubbling in Firefox (#3861)

        //委托事件过滤,符合条件的事件才会被加入事件队列中

        if ( delegateCount && cur.nodeType && (!event.button || event.type !== "click") ) {

            /* jshint eqeqeq: false */

            for ( ; cur != this; cur = cur.parentNode || this ) {

                /* jshint eqeqeq: true */

                // Don't check non-elements (#13208)

                // Don't process clicks on disabled elements (#6911, #8165, #11382, #11764)

                /*

                 nodeTyp:

                     元素element             1

                     属性attr                2

                     文本text                3

                     注释comments            8

                     文档document            9

                 

                 * */

                if ( cur.nodeType === 1 && (cur.disabled !== true || event.type !== "click") ) {

                    matches = [];

                    for ( i = 0; i < delegateCount; i++ ) {

                        handleObj = handlers[ i ];

                        // Don't conflict with Object.prototype properties (#13203)

                        sel = handleObj.selector + " ";

                        if ( matches[ sel ] === undefined ) {

                            matches[ sel ] = handleObj.needsContext ?

                                jQuery( sel, this ).index( cur ) >= 0 :

                                jQuery.find( sel, this, null, [ cur ] ).length;//判断【当前元素】是否是【绑定委托事件元素】的子元素

                        }

                        if ( matches[ sel ] ) {

                            matches.push( handleObj );

                        }

                    }

                    if ( matches.length ) {

                        handlerQueue.push({ elem: cur, handlers: matches });//将符合条件的事件加入事件队列中

                    }

                }

            }

        }

        //将非委托事件加入事件队列

        if ( delegateCount < handlers.length ) {

            handlerQueue.push({ elem: this, handlers: handlers.slice( delegateCount ) });

        }

        return handlerQueue;
    }

OK,到这里了,哈哈!

jQuery学习-事件之绑定事件(三)的更多相关文章

  1. jQuery学习-事件之绑定事件(二)

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  2. jQuery学习-事件之绑定事件(一)

    我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处 ...

  3. jQuery如何给body绑定事件?

    jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...

  4. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  5. jQuery学习小结1-CSS操作+事件

    一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...

  6. [jquery]高级篇--js绑定事件

    参考:  http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法.$(selector).on(eve ...

  7. jQuery相关方法7----各种事件和绑定事件

    一.jQuery事件 1.鼠标事件 click与dbclick事件 click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 $ele.click(): ...

  8. jquery html 动态添加元素绑定事件

    由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...

  9. jquery事件与绑定事件

    1.首先,我们来看一下经常使用的添加事件的方式: <input type="button" id="btn" value="click me!& ...

随机推荐

  1. asp.net后台向前端输出js脚本的三种方法

    //这个方法最快,因为它会输出到html标签之前 Response.Write("<script type='text/javascript'>alert('这个最快')< ...

  2. python爬图

    闲的无事,看着知乎里种种python优点,按捺不住,装起python3.4. 网上找了点爬行图片的代码,修改至兼容3.4,成功爬行指定url所有jpg图片,代码段如下: import os impor ...

  3. 括号配对问题--nyoj-2(栈)

    括号配对问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述现在,有一行括号序列,请你检查这行括号是否配对.   输入 第一行输入一个数N(0<N<=10 ...

  4. Cube(hd1220)

    Cube 点我 Problem Description Cowl is good at solving math problems. One day a friend asked him such a ...

  5. Objective-C实现计算你写了多少行代码

    #import <Foundation/Foundation.h> NSInteger codeLineCount(NSString *path) { //1.获取文件管理者,这是一个单例 ...

  6. docker 使用Data Volume 共享文件

    Adding a data volume You can add a data volume to a container using the -v flag with the docker run  ...

  7. mysql tee 命令

    tee 命令说明: 用过mysql的应该都会知道mysql有一个叫show 的命令,这个命令应该是SQL标准之外的一个扩展:和这个类似mysql还扩展了一个叫tee的命令. tee的功能是把你的所有输 ...

  8. TComponent与String的转换(得到控件的DFM格式的描述)

    现看下面这两个方法,把一个TComponent做成String,再就是把String转成TComponent function ComponentToStringProc(Component: TCo ...

  9. 【FSFA 读书笔记】Ch4 Volume Analysis & Cr 5 PC-based Partitions

    Volume Analysis 1. “卷”可以理解为从逻辑上对物理存储设备的重新编制,便于操作系统管理. (A volume is a collection of addressable secto ...

  10. nyoj 325 zb的生日(dfs)

    描述今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集训.他想给这两位兄弟买点什么庆祝生日,经过调查,zb发现C小加和never都很喜欢吃西瓜,而且一吃就是一堆的那种,zb ...