JavaScript 事件-白红宇

什么是JavaScript事件

事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水，当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了;通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应

事件对象是用来记录一些事件发生时的相关信息的对象，但事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

事件流

事件流就是描述了页面中接受事件的顺序，在浏览器发展的初期，两大浏览器厂商IE和Netscape互掐，出现了一个坑爹的情况，那就是他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的：IE的事件冒泡，Netscape的事件捕获

事件冒泡

事件冒泡即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的节点（文档）

事件捕获

事件捕获即事件最早由不太具体的节点接收，而最具体的节点最后接收到事件

Javascript事件处理程序的3种方式

内联形式

耦合度高，不利于维护

HTML事件处理程序

即我们直接在HTML代码中添加事件处理程序，如下面这段代码：

从上面的代码中我们可以看出，事件处理是直接嵌套在元素里头的，这样有一个毛病：就是html代码和js的耦合性太强，如果哪一天我想要改变js中showmsg，那么我不但要在js中修改，还需要到html中修改，一两处的修改我们能接受，但是当你的代码达到万行级别的时候，修改起来就需要劳民伤财了，所以，这个方式我们并不推荐使用

属性绑定（DOM0级事件）

只能绑定一个函数,在元素处于目标时触发该事件

即为指定对象添加事件处理，看下面的一段代码

从上面的代码中，我们能看出，相对于HTML事件处理程序，DOM0级事件，html代码和js代码的耦合性已经大大降低;但是，聪明的程序员还是不太满足，期望寻找更简便的处理方式

事件监听函数（DOM2级事件）

当addEventListener的最后参数为false时，是在冒泡阶段触发。如果是true的话是在捕获阶段出发。attachEvent始终是冒泡阶段触发

element.addEventListener(
    
     , 
     
      , 
      
       );element.removeEventListener(
       
        , 
        
         , 
         
          );element.attachEvent(event, callback)(IE11以后用addEventLisener)；element.detachEvent(event, callback)(IE11以后用addEventLisener)；

DOM2也是对特定的对象添加事件处理程序，但是主要涉及到两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()

它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件），看下面的一段代码：

这里我们可以看到，在添加删除事件处理的时候，最后一种方法更直接，也最简便。但是需要注意的是，在删除事件处理的时候，传入的参数一定要跟之前的参数一致，否则删除会失效！

当同一个对象触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行

事件代理

原理：使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上，利用冒泡的原理，把事件加到父级上，触发执行效果

在父元素上绑定事件，监听子元素的事件;主要用于子元素是新建元素或者子元素个数很多的情况下;这种方法可以提高性能，同时避免提前绑定元素事件而导致新建元素的事件没有生效的结果


     
     11111111111111111111
 
    
document.addEventListener('click', function (e) {            console.log('document currentTarget: ' + e.currentTarget.nodeName);            console.log('document target: ' + e.target.nodeName);            if (e.target.nodeName === 'LI') {                console.log('dom delegate: ' + e.eventPhase);            }            console.log(this); }, true);

使用事件委托对于web应用程序带来的几个优点：

1.可以大量节省内存占用，减少事件注册

2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定

3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率

缺点：

不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）

在管理鼠标事件的时候有些需要注意的地方；如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

事件冒泡和事件捕获的流程与区别

DOM2级事件规定事件包括三个阶段：

1、事件捕获阶段；

2、处于目标阶段；

3、事件冒泡阶段。

首先是捕获，然后处于目标阶段（即来到事件的发出位置），最后才是冒泡

DOM2级事件规定事件包括三个阶段：

首先是捕获，然后处于目标阶段（即来到事件的发出位置），最后才是冒泡

这里为什么没有布尔值呢？因为ie8以及更早的版本只支持事件冒泡，所以最后一个参数默认的相当于false来处理

事件的传播是可以阻止的：

在W3c中，使用stopPropagation（）方法

在IE下设置cancelBubble = true；

在捕获的过程中stopPropagation（）；后面的冒泡过程也不会发生了~

阻止事件的默认行为，例如click 后的跳转~

在W3c中，使用preventDefault（）方法；

在IE下设置window.event.returnValue = false;

自定义事件

DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");

返回的对象有一个initCustomEvent（）方法接收如下四个参数

1）type：字符串，触发的事件类型，自定义。例如 “keyDown”,“selectedChange”;

2）bubble（布尔值）：标示事件是否应该冒泡

3）cancelable(布尔值)：标示事件是否可以取消

4）detail（对象）：任意值，保存在event对象的detail属性中

可以像分配其他事件一样在DOM中分派创建的自定义事件对象