一 两种事件类型
其实是事件流的顺序，看下面的html代码当单击链接会发生什么呢？
<html>
<head></head>
<body onclick="javascript:alert('body')">
<div onclick="javascript:alert('div')">
<a href="#" onclick="javascript:alert('a')">链接</a>
</div>
</body>
</html>
当单击链接时会弹出提示a->div->body,说明单击事件会层层上抛给dom元素。这种有最准确的dom元素开始一直上抛事件源的事件流也叫冒泡。
IE仅仅支持事件的冒泡，在firefox下面还有一种叫事件的捕获，他的过程跟冒泡刚刚相反。
<html>
<head>
<script>
function alterMsg(msg){
return function(){
alert(msg);
};
}
window.onload=function(){
var oBody = document.body;
var oDiv = document.getElementsByTagName("div")[0];
var oHref = document.getElementsByTagName("a")[0];
oDiv.addEventListener("click", alterMsg("div"), true);
oBody.addEventListener("click", alterMsg("body"), true);
oHref.addEventListener("click", alterMsg("a"), true);
}
</script>
</head>
<body>
<div>
<a href="#">链接</a>
</div>
</body>
</html>
他的顺序会是body->div->a
二 四种绑定方式
前面我们看到了3种绑定方式，其实还有一种IE专用的。4种写法如下：
//跟html代码紧密结合，通用
第一种：<a href="#" onclick="doSomething()">链接</a>
//通用
第二种：domObj.onClick = function(){.......}
//IE专用
第三种: domObj.attachEvent("onclick",function{}(.....));
//DOM标准，IE不支持
第四种: domObj.addEventListener("click",function{}(.....), true/false);
这4种写法中我们关心5个问题
1. 浏览器之间的通用性
2. 一个dom元素对同一个事件能否绑定多个事件
3. 是否支持冒泡跟捕获
4. this关键字是否指向dom元素
5. Event参数
先来说说第5个问题吧，其实他只跟浏览器有关跟绑定方式无关，只有IE不提供Event参数，而作为window.Event提供。dom标准会为事件函数提供一个Event参数。
至于第4个问题，只有第3种方式，也就是IE事件API它的this指针会指向window对象，其他的都指向当前dom元素.
只有DOM标准才同时支持冒泡跟捕获两种模式，其余都仅支持冒泡
第1，2种其实是一样的也称为传统的绑定方式，他们的通用性最好，但是不支持第2点即多绑。
三 模拟多绑
因为传统方式有最好的通用性，明了的this指针。所以用实现通用的绑定方式且支持多绑相对于其他方式会方便很多。
Dean Edwards的addEvent库就是非常不错的一个方法。建议看的时候画它的数据结构，这样就很容易看懂了
function addEvent(element, type, handler){
//为每一个事件处理函数绑定一个独立的ID
if(!handler.$$guid) handler.$$guid = addEvent.guid++;
//为元素建立一个事件类型的hash表
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 handleEvent(event){
var returnValue = true;
//获取事件对象(处理IE与DOM的不同)
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){
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function(){
this.returnValue = false;
}
fixEvent.stopPropagation = function(){
this.cancelBubble = true;
}
function removeEvent(element, type, handler){
if(element.events && element.events[type]){
delete element.events[type][handler.$$guid];
}
}
四 模拟jQuery的事件写法
在jQuery中事件写法通常是这样的:
$("...").click(function(){
......
});
对照上面的addEvent这里的参数少了2个，一个是dom元素这个在jQuery对象内部，一个事件类型这里变成了函数名。还有一个问题是事件类型非常多，所以不可能用通常的方式为每个类型定义个函数。像上面的click函数应该就不存在显示的函数定义。
分享到：
相关推荐
Java中的事件机制是Java编程中一个重要的概念，它基于观察者模式（Observer Pattern）来实现对象之间的通信。观察者模式是一种行为设计模式，允许你定义一个订阅机制，可以在对象状态改变时通知多个“观察”该对象的...
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...
事件机制是OpenLayers的核心部分，它使得用户与地图进行交互成为可能。在OpenLayers中，事件机制主要涉及到控件（Controls）和处理器（Handlers）的概念。 控件在OpenLayers中扮演着重要的角色，它们是附加到地图上...
Java事件机制基于观察者模式，其中事件源（如按钮）会发布事件，而事件监听器则订阅这些事件并执行相应的操作。 事件、事件监听器和事件源是Java事件处理的三个核心概念。事件是用户或系统发生的某种情况，如鼠标...
### Qt中的事件机制详解 #### 一、事件的分类与特性 在Qt中，事件机制是框架的核心之一，用于管理用户界面与用户的交互过程。事件根据其产生方式的不同，可以分为三类：自发事件(Spontaneous events)、发布事件...
本文将深入探讨React Native的触摸事件机制，并展示如何利用这一机制实现类似微信通讯录的功能。 首先，我们要了解React Native中的触摸事件系统。与Web开发中的点击事件不同，React Native使用了一套基于 ...
C# 事件机制归纳 C# 事件机制是指在 C# 编程语言中实现事件处理的机制，包括委派、事件和事件处理过程。以下是对 C# 事件机制的详细归纳： 一、委派 委派是指一种特殊的方法签名，可以将方法作为参数传递，用于...
Flex ActionScript3.0事件机制的Demo, 举例说明了事件的三个阶段,事件的派发,事件的侦听,事件的拦截,自定义事件等相关知识点. 以上知识点在Demo中都有体现,初学者请仔细分析代码,加强理解,多调试、修改、验证以加深...
Spring框架的事件机制是其核心特性之一，它提供了一种基于发布-订阅模式的事件处理方式，使得在Spring应用中的不同组件之间可以进行解耦通信。这个机制允许一个组件（通常是一个服务）触发一个事件，然后其他感兴趣...
使用Spring事件机制实现异步的方法 Spring框架提供了一种事件机制，允许开发者将代码解耦合，实现松散耦合的设计理念。这里将详细介绍如何使用Spring事件机制实现异步的方法。 事件机制的实现主要包括三个部分：...
安卓事件机制的描述，包括安卓的进程通信机制、view事件的传递机制以及安卓的广播机制。
### Qt事件机制浅析 #### 一、什么是事件？ 在Qt框架中，事件是指系统或应用程序内部发生的某种“动作”，这种“动作”需要被特定的对象所感知并作出响应。这里的“动作”是一种广义上的概念，既包括用户交互操作...
Flex4.5事件机制是Flex应用程序开发中的核心组成部分，它基于ActionScript 3.0的事件模型，并且遵循DOM3级事件规范。事件机制使得开发者能够轻松响应用户交互和系统事件，为Flex程序员提供了强大且直观的处理工具。 ...
在上一个版本的事件机制中，可能涉及了复杂的事件监听器和触发器的实现，而在这个版本中，主要目标是简化这一过程。我们来看一下具体实现。 首先，定义了一个名为`Event`的类，它继承自`stdClass`。`Event`类有两个...
在Android开发中，事件机制是应用交互的核心部分，它使得用户与应用程序之间的沟通变得顺畅。这个"Android事件机制测试项目"旨在深入理解并实践这一关键功能。以下将详细阐述Android事件处理的相关知识点。 首先，...
在IT领域，线程同步和事件机制是多线程编程中的关键概念，特别是在Windows系统下，Visual C++提供了丰富的工具来实现这些功能。本项目"Visual C++事件机制线程同步工程"着重于如何利用事件对象（CEvent）进行线程间...
### JavaScript事件机制详解 #### 一、引言 在学习编程语言的过程中，"事件"这一概念往往是初学者遇到的一个难点，然而它又是编程中极为重要的一个组成部分。在JavaScript中，事件处理更是不可或缺的一部分，它是...
### Flex事件机制详解 #### 一、事件简介 在Flex框架中，事件是应用程序与用户交互的核心机制之一。它可以由多种触发源启动，包括但不限于用户的输入（如键盘按键、鼠标点击）、外部数据加载完成（例如WebService...
Flex事件机制是Adobe Flex应用程序开发中的核心组成部分，它允许组件之间进行有效的通信和交互。对于初级Flex程序员或爱好者来说，理解这一机制至关重要。在本文中，我们将深入探讨Flex事件的各个方面，包括事件流、...
在AS3中，事件机制是基于事件监听和广播的模式，允许开发者将特定事件与处理这些事件的方法或函数关联起来。虽然PHP是一种主要用于服务器端编程的语言，但其通过这种事件机制也可以实现类似于客户端语言的事件驱动...