理解DOM事件处理程序和事件委托

2018-10-07 本文已影响82人番茄沙司a

前言

JavaScript和HTML之间的交互是通过事件实现的。可以用侦听器（或处理程序）来预订事件。这种模式是设计模式中的观察者模式（Observer Pattern）。使页面行为和视图之间形成松散耦合。

一、基本概念：事件处理程序

响应某个事件的函数叫做事件处理程序（或事件侦听器），以on开头。

例如：onclick、onload等。

HTML事件处理程序

<input onclick="xx"/>

缺点：

存在时差问题。用户可能会在HTML元素一出现页面上就触发响应的事件，但当时的事件处理程序有可能尚不具备执行条件。

解决方案：将事件处理程序封装在一个try-catch块中。
这样扩展事件处理程序的作用域链在不同的浏览器中会导致不同的结果。
HTML与JavaScript代码紧密耦合。

DOM0

以这种方式添加事件处理程序会在事件流的冒泡阶段被处理。

element.onlick = function () {}

优点：

简单
具有跨浏览器的优势

删除通过DOM0级方法指定的事件处理程序：

element.onlick = null;

DOM1

规定如何映射基于XML的文档结构

没有涉及和事件相关的，在这里不赘述

DOM2

扩充了给出了众多新类型和新接口的定义

DOM视图：定义了跟踪不同文档视图的接口
DOM事件：定义了事件和事件处理的接口
DOM样式：增加了对CSS的支持
DOM遍历和范围：遍历和操作DOM的接口

通过 addEventListener() 处理指定事件处理程序

element.addEventListener('click', function () {}, false)

false：在冒泡阶段触发 (大多数情况下)

true：在捕获阶段触发

优点：可以添加多个事件处理程序

通过 removeEventListener() 删除事件处理程序

element.remoteEventListener('click', function () {}, false)

注：移除时传入的参数与添加处理程序时使用的参数相同。意味着通过addEventListener()添加的匿名函数无法被移除。

DOM3

添加了更多事件类型：
- UI事件
- 鼠标事件
- 滚轮事件
- 键盘事件
- 焦点事件
- 文本事件
- 合成事件
- 变动事件
- 变动名称事件
引入了以统一方式加载和保存文档的方法：在DOM加载和保存模块中定义
新增了验证文档的方法：在DOM验证模块中定义
支持XML1.0规范
DOM3添加事件处理程序

element.addEventListener('keyup', function () {}, false)

二、DOM事件模型

捕获
冒泡

三、DOM事件流

事件流描述的是从页面中接收事件的顺序。即浏览器在当前页面，用户点击了鼠标左键，是怎么传到页面上的，又是如何响应的呢？

DOM2级事件规定的事件流分三个阶段：

捕获阶段：从上向下
目标阶段：事件通过捕获到达目标元素
冒泡阶段：从目标元素向上传到window对象

四、描述DOM事件捕获/冒泡的具体流程

事件捕获会按照如下顺序传播：

window
document
<html>
<body>
div 父级元素->子级元素
目标元素

注：冒泡流程与之相反

五、事件对象的常见应用

事件对象event包含所有与事件相关的信息，包括：导致事件的元素、事件的类型以及其他信息。

5.1 DOM中的事件对象有关的属性和方法

event.preventDefault()

类型：Function

说明：阻止特定事件的默认行为

例子：给a标签绑定click事件，在响应函数中设置该方法会阻止链接默认跳转的行为
event.stopPropagation()

类型：Function

说明：立即阻止事件进一步冒泡

例子：父级元素和子元素分别绑定一个事件。我们希望子元素做一件事，父元素做一件事，即要使子元素单击，父元素不响应。
event.stopImmediatePropagation()

类型：Function

说明：阻止事件进一步冒泡，同时阻止任何事件处理程序被调用。事件响应优先级（DOM3级事件中新增）

例子：按钮绑定了两个click事件，通过优先级的方式，第一个响应函数是a，第二个是b。以此注册a，b两个click事件。想a点击时不要响应b了，即在a响应函数中定义这个方法，可以成功阻止b的执行。
event.currentTarget/event.target（重点）

类型：Element

常见问题：一个for循环，给DOM注册N多事件，即一个父元素有很多子元素，不想让一个for循环绑定click事件到每一个子元素，该如何优化？jQuery事件委托

事件委托（事件代理）：子元素的事件代理都转移到父级元素，绑定一次事件就可以了。响应函数中要判断当前到底哪个元素被点击了。

target：事件真正的目标，表示当前被点击的元素（IE：SourceElement）

currentTarget：当前正在处理事件的元素

注：在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。

5.2 事件委托代码实现

基于第八部分做的封装实现

var list = document.getElementById("myLinks");
EventUtil.addHander(list, "click", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    switch (target.id) {
        case "sayHello":
            document.title = "Change the document's title to Hello World";
            break;
        case "doSearch":
            location.href = "http://baidu.com";
            break;
        case "sayGoodbye":
            alert("Bye~");
            break;
    }
});

六、自定义事件（模拟事件）

场景：有一个button，增加事件，在别的地方不用回调处理。

var eve=new Event('custome');
ev.addEventListener('custome', function(){
    console.log('custome');
});
ev.dispatchEvent(eve);

CustomEvent ：除了可以指定事件名，还可以指定参数

Event：只能指定事件名

七、捕获流程/自定义事件

<div id="ev">
    <style>
        #ev{
            width: 300px;
            height: 100px;
            background: yellow;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>
    目标元素
    <script type="text/javascript">
        var ev=document.getElementById('ev');
        //给window注册捕获事件
        window.addEventListener('click',function(){
            console.log('window capture');
        },true);
       
        document.addEventListener('click',function(){
            console.log('document capture');
        },true);
        
        document.documentElement.addEventListener('click',function(){
            console.log('body capture');      
        },true);
        
        document.body.addEventListener('click',function(){
           console.log('body capture'); 
        },true);
        
        ev.addEventListener('click',function(){
            console.log('ev capture');
        },true);  
        
        //自定义事件
        var eve=new Event('test');
        ev.addEventListener('test',function(){
            console.log('test dispatch');
        })       
        //延时器模拟某个按钮的动作
        setTimeout(function(){
            ev.dispatchEvent(eve);  
        },1000);
    </script>
</div>

注：

响应的顺序和定义的顺序无关
把true改成false 则为冒泡

八、手写DOM事件处理跨浏览器（兼容IE）封装

var eventUtil = { /*DOM2级事件处理程序*/
    //给一个元素添加事件
    addHander: function (element, type, hander) {
        if (element.addEventListener) {
            element.addEventListener(type, hander, false); /*非IE*/
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, hander); /*IE*/
        } else {
            element["on" + type] = hander;
        }
    },
    //给一个元素删除事件
    removeHander: function (element, type, hander) {
        if (element.removeEventListener) {
            element.removeEventListener(type, hander, false); /*非IE*/
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, hander); /*IE*/
        } else {
            element["on" + type] = null;
        }
    },
    //获取兼容所有浏览器的一个对象
    getEvent: function (event) {
        return event ? event : window.event;
    },
    //获取事件类型
    getType: function (event) { //此项不存在浏览器兼容问题
        return event.type;
    },
    //事件来自哪个元素
    getElement: function (event) {
        return event.target || event.srcElement;
    },
    //阻止事件默认行为
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault(); /*非IE*/
        } else {
            event.returnValue = false; /*IE*/
        }
    },
    //阻止事件冒泡
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation(); /*非IE*/
        } else {
            event.cancelBubble = true; /*IE*/
        }
    }
}

以上，如有错误希望大家指正。