1、什么是事件？

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript 代码）与页面的外观（HTML 和CSS 代码）之间的松散耦合。DOM2 级规范开始尝试以一种符合逻辑的方式来标准化DOM事件。

2、什么是事件流？

事件冒泡：IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。如：

 <!DOCTYPE html>

 <html>

 <head>

     <title>Event Bubbling Example</title>

 </head>

 <body>

     <div id="myDiv">Click Me</div>

 </body>

 </html>

事件触发顺序为：

事件捕获：Netscape Communicator 团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

 <!DOCTYPE html>

 <html>

 <head>

     <title>Event Bubbling Example</title>

 </head>

 <body>

     <div id="myDiv">Click Me</div>

 </body>

 </html>

事件触发顺序为：

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。如：

 <!DOCTYPE html>

 <html>

 <head>

     <title>Event Bubbling Example</title>

 </head>

 <body>

     <div id="myDiv">Click Me</div>

 </body>

 </html>

总事件触发顺序为：

3、什么是事件处理程序？

事件就是用户或浏览器自身执行的某种动作。诸如click、load 和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头，因此click 事件的事件处理程序就是onclick，load 事件的事件处理程序就是onload。为事件指定处理程序的方式有好几种。

 3.1 、DOM0级事件处理程序

通过JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web 浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。要使用JavaScript 指定事件处理程序，首先必须取得一个要操作的对象的引用。绑定"onclick"方法，如：

 var btn = document.getElementById("myBtn");

 btn.onclick = function(){

     alert("Clicked");

 };

解除绑定"onclick"方法，如：

 btn.onclick = null;

3.2、DOM2 级事件处理程序

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

要在按钮上为click 事件添加事件处理程序（冒泡），可以使用下列代码：

 var btn = document.getElementById("myBtn");

 btn.addEventListener("click", function(){

     alert(this.id);

 }, false);

上面的代码为一个按钮添加了onclick 事件处理程序，而且该事件会在冒泡阶段被触发（因为最后一个参数是false）。与DOM0 级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子。

 var btn = document.getElementById("myBtn");

 btn.addEventListener("click", function(){

     alert(this.id);

 }, false);

 btn.addEventListener("click", function(){

     alert("Hello world!");

 }, f alse);

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发，因此输出：

 myBtn

 Hello world!

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。

匿名函数将无法移除，如下面的例子所示。

 var btn = document.getElementById("myBtn");

 btn.addEventListener("click", function(){

     alert(this.id);

 },false);

 //这里省略了其他代码

 btn.removeEventListener("click", function(){ //没有用！

     alert(this.id);

 }, false);

在这个例子中，我们使用addEventListener()添加了一个事件处理程序。虽然调用removeEventListener()时看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个是完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示。

正确做法是，请看下面例子：

 var btn = document.getElementById("myBtn");

 var handler = function(){

     alert(this.id);

 };

 btn.addEventListener("click", handler, false);

 //这里省略了其他代码

 btn.removeEventListener("click", handler, false); //有效！

重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中使用了相同的函数。

3.2.1、IE事件处理程序

IE 实现了与DOM 中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8 及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

要使用attachEvent()为按钮添加一个事件处理程序，可以使用以下代码。

 var btn = document.getElementById("myBtn");

 btn.attachEvent("onclick", function(){

     alert("Clicked");

 });

注意，attachEvent()的第一个参数是"onclick"，而非DOM 的addEventListener()方法中的"click"。

在IE 中使用attachEvent()与使用DOM0 级方法的主要区别在于事件处理程序的作用域。在使用DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window。来看下面的例子。

 var btn = document.getElementById("myBtn");

 btn.attachEvent("onclick", function(){

     alert(this === window); //true

 });

与addEventListener()类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序。来看下面的例子。

 var btn = document.getElementById("myBtn");

 btn.attachEvent("onclick", function(){

     alert("Clicked");

 });

 btn.attachEvent("onclick", function(){

     alert("Hello world!");

 });

输出：

 Hello world!

 Clicked

这里调用了两次attachEvent()，为同一个按钮添加了两个不同的事件处理程序。不过，与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。单击这个例子中的按钮，首先看到的是"Hello world!"，然后才是"Clicked"。

使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。与DOM 方法一样，这也意味着添加的匿名函数将不能被移除。不过，只要能够将对相同函数的引用传给detachEvent()，就可以移除相应的事件处理程序。例如：

 var btn = document.getElementById("myBtn");

 var handler = function(){

     alert("Clicked");

 };

 btn.attachEvent("onclick", handler);

 //这里省略了其他代码

 btn.detachEvent("onclick", handler);

注：支持该事件处理程序的只有IE和Opera

3.2.2、跨浏览器的事件处理程序

只需关注冒泡阶段。第一个要创建的方法是addHandler()，它的职责是视情况分别使用DOM0 级方法、DOM2 级方法或IE 方法来添加事件。这个方法属于一个名叫EventUtil 的对象，本书将使用这个对象来处理浏览器间的差异。addHandler()方法接受3 个参数：要操作的元素、事件名称和事件处理程序函数。

与addHandler()对应的方法是removeHandler()，它也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0 级方法。

EventUtil 的用法如下所示。

 var EventUtil = {

     addHandler: function(element, type, handler){

         if (element.addEventListener){

             element.addEventListener(type, handler, false);

         } else if (element.attachEvent){

             element.attachEvent("on" + type, handler);

         } else {

             element["on" + type] = handler;

         }

     },

     removeHandler: function(element, type, handler){

         if (element.removeEventListener){

             element.removeEventListener(type, handler, false);

         } else if (element.detachEvent){

             element.detachEvent("on" + type, handler);

         } else {

             element["on" + type] = null;

         }

     }

 };

可以像下面这样使用EventUtil 对象：

 var btn = document.getElementById("myBtn");

 var handler = function(){

     alert("Clicked");

 };

 EventUtil.addHandler(btn, "click", handler);

 //这里省略了其他代码

 EventUtil.removeHandler(btn, "click", handler);

今天的讨论就到这里，如果有什么意见或者建议，请多留言哦！！！

JavaScript事件模型的更多相关文章

  1. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  2. Javascript事件模型(一)：DOM0事件和DOM2事件

    javascript事件模型,本文主要有以下内容: DOM0事件模型 DOM2事件模型  一.DOM0事件模型 早期的事件模型称为DOM0级别. DOM0的事件具有极好的跨浏览器优势, 会以最快的速度 ...

  3. JavaScript事件模型及事件代理

    事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...

  4. 【repost】JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  5. Javascript事件模型系列（一）事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  6. JavaScript——事件模型

    DOM事件流: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件 ...

  7. JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  8. Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  9. [JS学习笔记]浅谈Javascript事件模型

    DOM0级事件模型 element.on[type] = function(){} 兼容性:全部支持   lay1 lay2 lay3 e.target:直接触发事件的元素[IE8及以下不支持tage ...

随机推荐

  1. STS启动失败：Failed to load the JNI shared library

    版本位不一致 jdk 版本 ↓ eclipse 版本(%STS_HOME%/STS.ini)

  2. 2.3.1关键字volatile与死循环

    关键字volatile的主要作用是使变量在多个线程间可见. 测试如下 package com.cky.test; /** * Created by edison on 2017/12/9. */ pu ...

  3. bzoj2002(lct模板)

    #include<iostream> #include<cstring> #include<cstdio> #include<cmath> #inclu ...

  4. day17(tomcat的安装，HTTP)

    Tomcat Tomcat是个小型服务器,由apache组织编写,转为发布java程序而写. 安装步骤: 官网:http://tomcat.apache.org/ 下载地址:http://tomcat ...

  5. nodejs mongodb 数据库封装DB类 -转

    使用到了nodejs的插件mongoose,用mongoose操作mongodb其实蛮方便的. 关于mongoose的安装就是 npm install -g mongoose 这个DB类的数据库配置是 ...

  6. MyBatis高级篇之整合ehcache缓存框架

    MyBatis高级篇之整合ehcache缓存框架  2017-09-01  0 Comments  1,671 Views  0 Times 一.前言 MyBatis为我们提供了Cache接口,也提供 ...

  7. Ubuntu12搭建nutch1.2+tomcat7+jdk1.6

    Ubuntu12搭建nutch1.2+tomcat7+jdk1.6 所用软件:jdk-6u24-linux-i586.bin apache-tomcat-7.0.27.tar.gz apache-nu ...

  8. shell工具-cut

    cut cut的工作就是“剪”,具体说就是在文件中负责剪切数据用的.cut命令从文件的每一行剪切字节.字符.和字段并将这些字节.字符和字段输出 基本用法 cut [参数] filename # 说明: ...

  9. poj2828 线段树单点更新

    Buy Tickets Time Limit: 4000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Java ...

  10. [ASE][Daily Scrum]11.10

    明天就是一年一度的光棍节了 提前提醒各位已经有妹子蓝孩子藏好自己的银行卡. 涛哥上周回家去了,进度上稍有一些耽搁不过今天就能补完所以影响不严重. 此外纠正我(PM-poor man)之前一个错误,我之 ...