DOM事件机制

DOM事件级别

DOM0级事件：on绑定的事件。缺点是一个事件的处理程序只能对应一个函数
DOM2级事件：监听事件。原生两个方法用来移除和添加事件。addEventListener()和removeEventListener()

em.addEventListener('事件名称'，事件处理程序，'true：捕获阶段，false:冒泡阶段')

DOM3级事件：添加了UI、焦点、鼠标、滚轮、文本、键盘、合成等事件

事件捕获、事件冒泡

事件执行顺序：事件捕获->目标事件绑定函数->事件冒泡
阻止事件冒泡：

1. event.stopPropagation()
2. return false//阻止了事件本身

事件代理

原理：把事件处理器添加到了父元素，等待子元素事件冒泡，并且父元素能够通过target判断是哪个目标元素。

<body>
    <ul id="color-list">
        <li>red</li>
        <li>orange</li>
        <li>yellow</li>
        <li>green</li>
        <li>blue</li>
        <li>indigo</li>
        <li>purple</li>
    </ul>
    <script>
    (function() {
        var colorList = document.getElementById("color-list");
        colorList.addEventListener('click', showColor, false);

        function showColor(e) {
            e = e || window.event;
            var targetElement = e.target || e.srcElement;
            if (targetElement.nodeName.toLowerCase() === "li") {
                alert(targetElement.innerHTML);
            }
        }
    })();
    </script>
</body>

好处：提高性能。

event

window对象的event对象。常用方法

event.preventDefault():阻止默认的事件。比如a标签的跳转。
event.stopPropagation():阻止冒泡
event.stopImmediatePropagation():阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡
event.target：target事件属性可返回事件的目标节点，如生成事件的元素、文档或窗口
event.currentTarget:当前事件所绑定的元素。

DOM事件机制

DOM事件级别

事件捕获、事件冒泡

事件代理

event

推荐阅读更多精彩内容