• jQuery学习-事件之绑定事件(三)


    在上一篇《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, thisnull, [ 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,到这里了,哈哈!
  • 相关阅读:
    星时代曹波涛:分享一个测试数据生成的工具
    myabtis-plus 分页
    吴恩达机器学习_55过拟合问题/56代价函数
    吴恩达机器学习_51高级优化/52多元分类:一对多
    吴恩达机器学习_49代价函数/50简化代价函数与梯度
    吴恩达机器学习_46分类/47假设函数/48决策边界
    Windows10下安装VMware workstation 15.1虚拟机+配置Ubuntu16系统
    编程作业ex1:附加练习
    编程作业ex1:线性回归
    吴恩达机器学习_43矢量
  • 原文地址:https://www.cnblogs.com/urols-jiang/p/4312033.html
Copyright © 2020-2023  润新知