-
过一下index.html就行查看全部
-
index.html的执行结果有待通过后边的课程分析一下查看全部
-
内部冒泡与外部冒泡独立处理,相互不会影响,但是又有千丝万缕的关系??? 初看 trigger 源码部分真有点晕,处理的 hack 太多了: 命名空间的过滤 模拟事件对象 制作一个触发的路径队列eventPath 对 eventPath 进行模拟冒泡的触发 在一个层级调用 dispatch 处理各自的内部事件关系(委托)查看全部
-
while ((matched = handlerQueue[i++]) && !event.isPropagationStopped()) { event.currentTarget = matched.elem; j = 0; while ((handleObj = matched.handlers[j++]) && !event.isImmediatePropagationStopped()) { ret = handleObj.handler.apply(matched.elem, args); //如果返回了false if (ret !== undefined) { if ((event.result = ret) === false) { event.preventDefault(); event.stopPropagation(); } 总的来说 jQuery.event.handlers 做的事情: 将有序地返回当前事件所需执行的所有事件处理程序。 这里的事件处理程序既包括直接绑定在该元素上的事件处理程序,也包括利用冒泡机制委托在该元素的事件处理程序(委托机制依赖于 selector)。 在返回这些事件处理程序时,委托的事件处理程序相对于直接绑定的事件处理程序在队列的更前,委托层次越深,该事件处理程序则越靠前。查看全部
-
那么事件的执行就需要有个先后,jQuery要如何排序呢? 依赖委托节点在 DOM 树的深度安排优先级,委托的 DOM 节点层次越深,其执行优先级越高,委托的事件处理程序相对于直接绑定的事件处理程序在队列的更前面,委托层次越深,该事件处理程序则越靠前。 index.html执行结果: test 委托到p触发 被阻止了 mousedown body查看全部
-
总的来说 jQuery.event.fix 做的事情: 1.将原生的事件对象 event 修正为一个新的可写 event 对象,并对该 event 的属性以及方法统一接口 2.该方法在内部调用了 jQuery.Event(event) 构造函数查看全部
-
如上结构,currentTarget 是 aaron 的 div 元素 , target 是 p 元素,事件对象是有作用域的 currentTarget 是等于 this 的。 事件对象的基础大家都是知道了,jQuery为了实现统一的事件对象调用与委托的的处理,将事件对象单独重写,这样如果用户做了任何的行为处理,jQuery 内部都能获取到状态值,从而用来处理同一个元素绑定多个模拟事件的判断处理。这也是重写后的一个重要意义。查看全部
-
某些事件类型的有特殊行为和属性,换句话说就是某些事件不是大众化的事件不能一概处理。此时就需要用到Special Event机制了。如果有兴趣更多了解,可以看一下index.html jQuery.event.add 方法在第一次初始化处理器的时候,会检查是否为自定义事件,如果存在则将会把控制权限交给自定义事件的事件初始化函数,同样事件卸载的 jQuery.event.remove 方法在删除处理器前也会检查此处。查看全部
-
本节在index.html中通过special模拟了input 和 textarea事件查看全部
-
本节学习,一个是下边总结的结构,另一个是index.html的注释 理解 jQuery.event.add 代码结构: 第一步:获取数据缓存 -> elemData = data_priv.get( elem ); 第二步:创建编号 -> handler.guid= jQuery.guid++; 主要目的是用来寻找或者删除handler,因为这个东东是缓存在缓存对象上的,没有直接跟元素节点发生关联。 第三步:给缓存增加事件处理句柄 -> events,eventHandle 都是 elemData 缓存对象内部的 1. 一个是 events,是jQuery内部维护的事件列队 2. 一个是 handle,是实际绑定到elem中的事件处理函数 之后的代码无非就是对这 2 个对象的筛选、分组、填充了。 第四步: 填充事件名(events)与事件句柄(handle) 通过那个图片的内容取理解,那个图片非常到位查看全部
-
本节学习,一个是下边总结的结构,另一个是index.html的注释 理解 jQuery.event.add 代码结构: 第一步:获取数据缓存 -> elemData = data_priv.get( elem ); 第二步:创建编号 -> handler.guid= jQuery.guid++; 第三步:给缓存增加事件处理句柄 1. 一个是 events,是jQuery内部维护的事件列队 2. 一个是 handle,是实际绑定到elem中的事件处理函数 之后的代码无非就是对这 2 个对象的筛选、分组、填充了。 第四步: 填充事件名(events)与事件句柄(handle) 通过那个图片的内容取理解,那个图片非常到位查看全部
-
本节学习方法: index.html代码理解清楚了,上边现在注释补的也差不多了。 左边文档大概过一下,知道说的什么,然后接着往下看。查看全部
-
$('#element).delegate('a', 'click', function() { alert("!!!") }); 任何时候只要有事件冒泡到$(‘#element)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。 可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。那么 (′a′).live()==(document).delegate('a') 总结 在下列情况下,应该使用 .live()或 .delegate(),而不能使用 .bind(): 1. 为DOM中的很多元素绑定相同事件; 2. 为DOM中尚不存在的元素绑定事件; 3. 用.bind()的代价是非常大的,它会把相同的一个事件处理程序hook到所有匹配的DOM元素上 4. 不要再用.live()了,它已经不再被推荐了,而且还有许多问题 5. .delegate()会提供很好的方法来提高效率,同时我们可以添加事件处理方法到动态添加的元素上 我们可以用.on() 来代替上述的 3 种方法。 不足点也是有的: 1. 并非所有的事件都能冒泡,如load, change, submit, focus, blur 2. 加大管理复杂 3. 不好模拟用户触发事件 4. 如何取舍就看项目实际中运用了查看全部
-
事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document) 事件传送可以分为3个阶段。 (1)在事件捕捉(Capturing)阶段,事件将沿着DOM树向下转送,目标节点的每一个祖先节点,直至目标节点。例如,若用户单击了一个超链接,则该单击事件将从document节点转送到html元素,body元素以及包含该链接的p元素。在此过程中,浏览器都会检测针对该事件的 捕获事件监听器,并运行这个 捕获事件监听器。 (2)在目标(target)阶段,浏览器在查找到已经指定给目标事件的事件监听器之后,就会运行该事件监听器。目标节点就是触发事件的 DOM 节点。例如,如果用户单击一个超链接,那么该链接就是目标节点(此时的目标节点实际上是超链接内的文本节点)。 (3)在冒泡(Bubbling)阶段,事件将沿着DOM树向上转送,再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕捉事件监听器的事件监听器,并执行它们。查看全部
-
我们参考右边的代码,整个流程如下: 分解类型,jQuery对象,节点对象,文本,字符串,脚本 引入nodes收集各种分解的类型数据 针对html节点,兼容IE的处理,先过滤空白,然后补全tr,td等 创建文档碎片的div包含节点,把html结构给innerHTML进去 取出创建的节点,jQuery.merge(nodes, tmp.childNodes),因为靠div包装过查看全部
举报
0/150
提交
取消