jQuery事件处理（三）

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/charling/p/3468260.html

文章标签：

#javascript #ViewUI

本文详细解析jQuery中keyHooks和mouseHooks对象，它们如何对键盘按键和鼠标事件进行封装与修正，以及如何在注册事件时将关键数据存储到缓存中。深入理解这些机制对于优化用户体验与事件响应至关重要。

继续了解jQuery对浏览器兼容的处理

1、keyHooks对键盘按键的封装

keyHooks: {

　　// 一些键盘相关的属性
　　props: "char charCode key keyCode".split(" "),

　　// 新的event对象和原生的event对象作为参数传入filter
　　filter: function( event, original ) {

　　　　// 如果event中没有which属性，新声明一个which属性并赋值
　　　　if ( event.which == null ) {

　　　　　　// 原生event中如果有charCode，就将它的charCode赋值给event的which属性，否则将它的keyCode赋值给which属性
　　　　　　event.which = original.charCode != null ? original.charCode : original.keyCode;
　　　　}

　　　　// 返回新的event

　　　　return event;
　　}
},

mouseHooks: {

　　// 一些鼠标相关的属性
　　props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" ")

　　// 传入新event和原生event
　　filter: function( event, original ) {
　　　　var eventDoc, doc, body,
　　　　button = original.button;

　　　　// 统一pageX/Y，如果没有就通过计算得到一个

　　　　if ( event.pageX == null && original.clientX != null ) {

　　　　　　// 拿到目标元素的根元素，默认是document
　　　　　　eventDoc = event.target.ownerDocument || document;
　　　　　　doc = eventDoc.documentElement;
　　　　　　body = eventDoc.body;

　　　　　　event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && 　　　　　　　　　　　　body.clientLeft || 0 );
　　　　　　event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && 　　　　　　　　　　　　body.clientTop || 0 );
　　　　}

　　　　// 如果event中没有which，并且原生event中有button属性
　　　　if ( !event.which && button !== undefined ) {

　　　　　　// 将button属性迁移到新event的which属性中
　　　　　　event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
　　　　}

　　　　return event;
　　}
}

上面的两个对象，会在jQuery内部调用event的fix方法时用到，进行event的修正。

接下来需要继续分析注册事件时到底往cache中存入了什么，以及为什么存这些数据。

转载于:https://www.cnblogs.com/charling/p/3468260.html