`

精通JavaScript第六章的一個添加事件的方法

阅读更多

 很经典的一段,在此记录一下,原理很简单。

 

// 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;   
}; 

 

 

 

 

 

。。。

分享到:
评论

相关推荐

    精通JavaScript+jQuery书中实例

    jQuery是一个JavaScript库,它的出现简化了DOM操作、事件处理、动画和Ajax交互。jQuery的语法简洁,使得开发者可以更快速地编写代码。"精通jQuery"部分可能讲解了如何选择器(如$("#id")和$(".class"))来选取DOM...

    精通javascript 源代码

    在"精通JavaScript源代码"的学习过程中,你需要掌握以下几个核心知识点: 1. **基础语法**:包括变量声明(var、let、const)、数据类型(原始类型如字符串、数字、布尔、null、undefined,以及对象类型)、操作符...

    精通JavaScript 书籍源代码

    通过“精通JavaScript”的源代码,读者可以亲手实践每一章节的示例,这将加深对概念的理解,并有助于培养实际开发中的问题解决能力。无论你是初学者还是经验丰富的开发者,这些源代码都将为你的JavaScript之旅提供...

    Html+Css+Javascript从入门到精通.pdf

    **第六章:在网页中使用链接** - **链接属性**:添加链接标题和目标窗口。 - **链接跳转**:实现页面间的导航。 **第七章:创建有声有色的网页** - **图片设置**:控制图像尺寸和位置。 - **图文混排**:实现图片...

    精通JavaScript+jquery_02-10实例

    在本资源中,“精通JavaScript+jQuery_02-10实例”涵盖了JavaScript和jQuery的多个核心章节,旨在帮助用户深入理解和熟练运用这两种强大的Web开发工具。JavaScript是一种广泛应用于客户端浏览器的脚本语言,而jQuery...

    从入门到精通javascript全部代码

    "从入门到精通javascript全部代码"这个资源旨在帮助初学者逐步掌握JavaScript,并通过实际代码示例深入理解其核心概念。 首先,JavaScript的核心知识点包括变量、数据类型、控制结构(如条件语句和循环)、函数、...

    精通JavaScript.jQuery\书中实例\第14章

    在深入探讨"精通JavaScript.jQuery"这一主题时,我们聚焦于第14章中的实例,这一章主要关注的是如何利用jQuery库来增强JavaScript的功能,提高Web应用的性能和用户体验。jQuery是一个广泛使用的JavaScript库,它简化...

    JavaScript从入门到精通(第4版)(示例源码+习题答案).7z

    6. **ES6新特性**:第四版教材通常会包含ECMAScript 6(ES6)的最新特性,如let和const声明、解构赋值、箭头函数、模板字符串、类与继承、Promise等,这些都是现代JavaScript开发中常用的功能。 7. **JavaScript...

    精通javascript jquery 书中实例

    5. **第6章** - jQuery进阶:可能包含更多高级的jQuery特性,如插件使用、自定义动画、AJAX操作、事件处理的优化等。 6. **第7章** - 动画与特效:此章主要讲述如何使用jQuery创建复杂的动画效果,包括滑动、淡入...

    JavaScript从入门到精通 所有例题程序

    "JavaScript从入门到精通 所有例题程序"是一个专门针对学习者设计的资源包,旨在帮助初学者通过实践掌握JavaScript的核心概念和技术。 这个资源包中的"sl"实例源程序包含了大量例题,涵盖了JavaScript的基础到进阶...

    精通javascript+jquery第8课

    在本课程“精通JavaScript+jQuery第8课”中,我们将深入探讨JavaScript这门强大的脚本语言及其与jQuery库的结合应用。JavaScript,作为Web开发的基础,是实现网页动态交互的关键,而jQuery则以其简洁易用的API大大...

    《JavaScript实例精通》[源代码]

    第6章(\6) 示例描述:JavaScript页面处理技巧。 6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm ...

    精通JavaScript+jQuery电子书+源码-部分5

    jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。 在“精通JavaScript+jQuery电子书+源码-部分5”中,读者可以深入学习这两门技术的高级概念和实践技巧。这...

    精通JavaScript+jQuery电子书+源码-部分2

    jQuery则是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery的主要优势在于它提供了一致且简洁的API,使得开发者可以快速编写复杂的JavaScript代码。jQuery的关键功能包括: 1. ...

    精通JavaScript

    6. **闭包**:闭包是JavaScript中的一个重要特性,它允许函数访问和操作其外部作用域的变量,即使在其外部函数已经执行完毕后。 7. **ES6及更高版本**:ECMAScript是JavaScript的标准化,ES6(也称ES2015)引入了...

    精通JavaScript动态网页编程

    本文将深入探讨JavaScript动态网页编程的核心概念、语法特性以及实际应用,帮助你精通这一技能。 一、JavaScript基础 1. 变量与数据类型:JavaScript支持var、let和const声明变量,其数据类型包括基本类型(如字符...

    JavaScript从入门到精通(第2版)书籍和源代码实例

    总之,《JavaScript从入门到精通(第2版)》是一本全面覆盖JavaScript语言和实践的指南,无论你是新手还是有一定经验的开发者,都能从中受益匪浅。通过学习和实践,你将具备创建复杂Web应用的能力,成为一名真正的...

    JavaScript从入门到精通(第2版)( (美)Steve Suehring)中文pdf扫描版-2

    这本书全面覆盖了JavaScript的各个方面,无论是对新手还是有一定经验的开发者来说,都是一个宝贵的资源。通过阅读和实践,读者不仅可以掌握JavaScript的基本语法,还能了解到高级特性和最佳实践,从而在JavaScript的...

Global site tag (gtag.js) - Google Analytics