简介

事宜是能够被 JavaScript 侦测到的行动。

网页中的每一个元素都能够发作某些能够触发 JavaScript 函数或递次的事宜。

事宜一般与函数合营运用，当事宜发作时函数才会实行。

实行JS 事宜的体式格局：

• HTML 事宜属性能够直接实行 JavaScript 代码

• HTML 事宜属性能够挪用 JavaScript 函数

• 你能够为 HTML 元素指定本身的事宜处置惩罚递次

• 你能够阻挠事宜的发作。

• 等等 …

事宜流

事宜流形貌的是从页面中吸收事宜的递次。

• IE 的事宜流是事宜冒泡流，事宜由子元素猎取并沿DOM树向上流传。即事宜最最先由最详细的元素(文档中嵌套条理最深的谁人节点)吸收，然后逐级向上转播至最不详细的节点(document)，用 stopPropagation() 要领停止冒泡。

• Netscape 的事宜流是事宜捕捉流，事宜由根元素猎取并沿DOM树向下分发。与事宜冒泡流相反，事宜捕捉的头脑是不太详细的节点(document)应当更早吸收到事宜，而最详细的节点末了吸收到事宜。已不适用了

Event 对象

HTML DOM Event 对象

IE 中的 Event 对象

事宜处置惩罚递次

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 文件加载胜利！');