很经典的一段,在此记录一下,原理很简单。
// addEvent/removeEvent written by Dean Edwards, 2005
// with input from Tino Zijdel
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler) {
//为每一个事件处理函数分派一个唯一的ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
//为元素的事件类型创建一个哈希表
if (!element.events) element.events = {};
//为每一个"元素/事件"对创建一个事件处理程序的哈希表
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
//存储存在的事件处理函数(如果有)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
//将事件处理函数存入哈希表
handlers[handler.$$guid] = handler;
//指派一个全局的事件处理函数来做所有的工作
element["on" + type] = handleEvent;
};
//用来创建唯一的ID的计数器
addEvent.guid = 1;
function removeEvent(element, type, handler) {
//从哈希表中删除事件处理函数
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
var returnValue = true;
//抓获事件对象(IE使用全局事件对象)
event = event || fixEvent(window.event);
//取得事件处理函数的哈希表的引用
var handlers = this.events[event.type];
//执行每一个处理函数
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
//为IE的事件对象添加一些“缺失的”函数
function fixEvent(event) {
//添加标准的W3C方法
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
。。。
分享到:
相关推荐
jQuery是一个JavaScript库,它的出现简化了DOM操作、事件处理、动画和Ajax交互。jQuery的语法简洁,使得开发者可以更快速地编写代码。"精通jQuery"部分可能讲解了如何选择器(如$("#id")和$(".class"))来选取DOM...
在"精通JavaScript源代码"的学习过程中,你需要掌握以下几个核心知识点: 1. **基础语法**:包括变量声明(var、let、const)、数据类型(原始类型如字符串、数字、布尔、null、undefined,以及对象类型)、操作符...
通过“精通JavaScript”的源代码,读者可以亲手实践每一章节的示例,这将加深对概念的理解,并有助于培养实际开发中的问题解决能力。无论你是初学者还是经验丰富的开发者,这些源代码都将为你的JavaScript之旅提供...
**第六章:在网页中使用链接** - **链接属性**:添加链接标题和目标窗口。 - **链接跳转**:实现页面间的导航。 **第七章:创建有声有色的网页** - **图片设置**:控制图像尺寸和位置。 - **图文混排**:实现图片...
在本资源中,“精通JavaScript+jQuery_02-10实例”涵盖了JavaScript和jQuery的多个核心章节,旨在帮助用户深入理解和熟练运用这两种强大的Web开发工具。JavaScript是一种广泛应用于客户端浏览器的脚本语言,而jQuery...
"从入门到精通javascript全部代码"这个资源旨在帮助初学者逐步掌握JavaScript,并通过实际代码示例深入理解其核心概念。 首先,JavaScript的核心知识点包括变量、数据类型、控制结构(如条件语句和循环)、函数、...
在深入探讨"精通JavaScript.jQuery"这一主题时,我们聚焦于第14章中的实例,这一章主要关注的是如何利用jQuery库来增强JavaScript的功能,提高Web应用的性能和用户体验。jQuery是一个广泛使用的JavaScript库,它简化...
6. **ES6新特性**:第四版教材通常会包含ECMAScript 6(ES6)的最新特性,如let和const声明、解构赋值、箭头函数、模板字符串、类与继承、Promise等,这些都是现代JavaScript开发中常用的功能。 7. **JavaScript...
5. **第6章** - jQuery进阶:可能包含更多高级的jQuery特性,如插件使用、自定义动画、AJAX操作、事件处理的优化等。 6. **第7章** - 动画与特效:此章主要讲述如何使用jQuery创建复杂的动画效果,包括滑动、淡入...
"JavaScript从入门到精通 所有例题程序"是一个专门针对学习者设计的资源包,旨在帮助初学者通过实践掌握JavaScript的核心概念和技术。 这个资源包中的"sl"实例源程序包含了大量例题,涵盖了JavaScript的基础到进阶...
在本课程“精通JavaScript+jQuery第8课”中,我们将深入探讨JavaScript这门强大的脚本语言及其与jQuery库的结合应用。JavaScript,作为Web开发的基础,是实现网页动态交互的关键,而jQuery则以其简洁易用的API大大...
第6章(\6) 示例描述:JavaScript页面处理技巧。 6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm ...
jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。 在“精通JavaScript+jQuery电子书+源码-部分5”中,读者可以深入学习这两门技术的高级概念和实践技巧。这...
jQuery则是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery的主要优势在于它提供了一致且简洁的API,使得开发者可以快速编写复杂的JavaScript代码。jQuery的关键功能包括: 1. ...
6. **闭包**:闭包是JavaScript中的一个重要特性,它允许函数访问和操作其外部作用域的变量,即使在其外部函数已经执行完毕后。 7. **ES6及更高版本**:ECMAScript是JavaScript的标准化,ES6(也称ES2015)引入了...
本文将深入探讨JavaScript动态网页编程的核心概念、语法特性以及实际应用,帮助你精通这一技能。 一、JavaScript基础 1. 变量与数据类型:JavaScript支持var、let和const声明变量,其数据类型包括基本类型(如字符...
总之,《JavaScript从入门到精通(第2版)》是一本全面覆盖JavaScript语言和实践的指南,无论你是新手还是有一定经验的开发者,都能从中受益匪浅。通过学习和实践,你将具备创建复杂Web应用的能力,成为一名真正的...
这本书全面覆盖了JavaScript的各个方面,无论是对新手还是有一定经验的开发者来说,都是一个宝贵的资源。通过阅读和实践,读者不仅可以掌握JavaScript的基本语法,还能了解到高级特性和最佳实践,从而在JavaScript的...