前端事件绑定知识点（面试常考）-原创手记-慕课网

简介

事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

事件通常与函数配合使用，当事件发生时函数才会执行。

执行JS 事件的方式：

HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
等等 ...

常用的JS事件	type
鼠标单击事件	onclick
鼠标经过事件	onmouseover
鼠标移开事件	onmouseout
聚焦事件	onfocus
失焦事件	onblur
加载事件	onload
刷新页面	onunload（貌似只对IE有效）
关闭页面	onbeforeunload（貌似只对IE有效）

事件流

事件流描述的是从页面中接受事件的顺序。

IE 的事件流是事件冒泡流，事件由子元素获取并沿DOM树向上传播。即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(document)，用 stopPropagation() 方法终止冒泡。
Netscape 的事件流是事件捕获流，事件由根元素获取并沿DOM树向下分发。与事件冒泡流相反，事件捕获的思想是不太具体的节点(document)应该更早接收到事件，而最具体的节点最后接收到事件。已经不适用了

Event 对象

HTML DOM Event 对象

header 1	header 2
事件	event
事件目标	event.target
添加事件	element.addEventListener(type, listener, false)
移除事件	element.removeEventListener(type, listener, false)
阻止事件冒泡	event.stopPropagation()
取消默认行为	event.preventDefault()

IE 中的 Event 对象

header 1	header 2
事件	window.event
事件目标	event.srcElement
添加事件	element.attachEvent('on' + type, listener)
移除事件	element.detachEvent('on' + type, listener)
阻止事件冒泡	event.cancelBubble = true
取消默认行为	event.returnValue = false

事件处理程序

HTML 事件处理程序

事件直接写在html的元素里面，缺点：html和js代码紧密的耦合在一起。

<a href="" onclick="alert('msg');">测试</a>

0级 DOM事件处理程序

把一个函数赋值给一个事件的处理程序属性，优点：比较简单，跨浏览器支持。缺点：不能添加多个事件处理程序，最后一个事件会覆盖前面的事件

document.getElementById('id').onclick = function () {
    alert(1);
}

2级 DOM事件处理程序

通过 addeventlistener() 添加事件，只能用 removeEventlistener() 删除此事件。它们都接收三个参数：要处理的事件名event（不加'on'）、作为事件处理程序的函数function（优点：可以添加多个事件处理程序，）和一个布尔值useCapture。布尔参数仅仅在现代浏览器最近的几个版本中是可加可不加的，并且true代表该事件在捕获阶段执行，false代表在冒泡阶段执行，建议写false，因为有些浏览器只有冒泡阶段。

target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);

IE 事件处理程序

IE8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄。通过 attachEvent() 添加事件，只能用 detachEvent() 删除此事件。这两个方法接收相同的两个参数：事件处理程序名称 type 与事件处理函数 function，不支持第三个参数的原因：IE8--只支持冒泡冒泡流。

element.attachEvent(type, function)
element.detachEvent(type, function)

事件代理和委托

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

<div id="box">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

<script>
    let box = document.getElementById('box');
    box.addEventListener('click', function (e) {
        // 检查事件源e.targe是否为P
        if (e.target.nodeName === 'P') {
            // 真正的处理过程在这里
            alert('p');
        }
    })
</script>

跨浏览器兼容的事件处理程序（能力检测）

/*
 * @Author: bxm09
 * @Date:   2017-03-24 15:51:37
 * @Last Modified by:   bxm09
 * @Last Modified time: 2017-07-24 13:16:04
 * @Desc 跨浏览器兼容的事件处理程序（能力检测）
 */

var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },

    // type兼容
    getType: function(event) {
        return event.type;
    },

    // target兼容
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    /**
     * 添加事件句柄
     * 2级 DOM -> IE -> 0级 DOM
     */
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else {
            // 在这里由于.与'on'字符串不能链接，只能用 []
            elem['on' + type] = listener;
        }
    },

    // 移除事件句柄
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null;
        }
    },

    /**
     * 添加事件代理
     */
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this 指向 e.target
            }
        });
    },

    /**
     * 取消默认行为
     * 非IE -> IE
     */
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    /**
     * 阻止事件冒泡
     * 非IE -> IE
     */
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

console.log('eventshiv.js 文件加载成功！');

前端事件绑定知识点（面试常考）原创