JavaScript 事件，事件流，事件委托

事件

HTML事件
HTML 事件可以是浏览器行为，也可以是用户行为。HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

示例：按钮元素中添加了 onclick 属性

<button onclick="this.innerHTML=Date()">现在的时间?</button>
复制代码

常见的HTML事件：

事件流

事件流就是描述了页面中接受事件的顺序，IE和Netscape提出来差不多完全相反的事件流的概念，IE事件流是事件冒泡流，Netscape事件流是事件捕获流。

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

示例：

<div id = "div">
    <span id="span">
        <a id="aTag">事件测试</a>
    </span>
</div>
复制代码

document.getElementById("aTag").addEventListener('click',aTag);
document.getElementById("span").addEventListener('click',span);
document.getElementById("div").addEventListener('click',div);
function aTag(e) {
    alert("点击的是a标签");
}
function span(e) {
    alert("点击的是span标签");
}
function div(e) {
    alert("点击的是div标签");
}
复制代码

事件捕获
事件捕获即事件最早由不太具体的节点接收，而最具体的节点最后接收到事件。（由外及内）

示例：

document.getElementById("div").addEventListener('click',div,true);
document.getElementById("aTag").addEventListener('click',aTag,true);
document.getElementById("span").addEventListener('click',span,true);
复制代码

第三个参数设置为true，即为捕获事件，默认为false；否则的话，事件流还是和上面的一样，因为不管是在IE还是标准浏览器下，事件冒泡浏览器都支持的。

DOM事件流
DOM2级事件流：
DOM2级事件 规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

• 捕获阶段：实际目标(
  元素)在捕获阶段不会接收事件，意思是事件从 [ document->html->body ] 后就停止了。【1、2、3】

  © 版权声明

  文章版权归作者所有，未经允许请勿转载。
  THE END
  前端