jQuery学习-事件之绑定事件（三）
2024-04-01 15:18:52
在上一篇《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,到这里了，哈哈！
最新文章
- React Native 之生命周期
- LeetCode Note 1st,practice makes perfect
- Git系列教程二 基础介绍
- kvm
- Fragment要点复习
- Redis和Memcache的关系
- 用Java简单实现C#的参数为Action<T> Function<T,boolean>扩展方法
- WPF实现渐变淡入淡出的动画效果
- xxx-servlet.xml vs applicationContext.xml
- 网上图书商城项目学习笔记-014购物车模块页面javascrip
- IOS DLNA开发（CyberLink和PlatinumKit）
- Citrix 服务器虚拟化之一 网络部署Xenserver 6.2
- Cocos2D将v1.0的tileMap游戏转换到v3.4中一例(五)
- SpringBoot之配置
- 记录-eureka
- 第七节，TensorFlow编程基础案例-TensorBoard以及常用函数、共享变量、图操作(下)
- 十图详解tensorflow数据读取机制
- linux rpm jdk安装环境配置
- Shell 学习笔记之函数
- npm 报错： npm ERR! Please try running this command again as root/Administrator.