DOM事件

DOM事件三个阶段

---

• 捕捉阶段（capture phase）：从最上层元素，直到最下层（你点击的那个target）元素。路过的所有节*
  点都可以捕捉到该事件。
• 命中阶段（target phase）：如果该事件成功到达了target元素，它会进行事件处理。
• 冒泡阶段（bubbling phase）：事件从最下层向上传递，依次触发父元素的该事件处理函数。

DOM Level 0 Event

---

在HTML添加属性onclick进行事件的绑定

<div style="width: 100px;height: 100px; background-color: #5afcff" onclick="info()"></div>

<script>
    function info(){
        alert("这是DOM Level0 Event在HTML添加属性");
    }
</script>

在javarscript中定义并绑定事件

<div id="hyq" style="width: 100px;height: 100px; background-color: #5afcff" ></divid>

<script>
document.getElementById("hyq").onclick=function () { info() };
function info(){
    alert("这是DOMLevel0 Event在JS中定义");
}
</script>

由于onclicl是对DOM元素的属性的赋值，因此当绑定多个事件时后者事件将会覆盖前面的事件，显示的效果为只有一个事件

<script>
var el = document.getElementById("hyq");
el.onclick = function (){
console.log("这是第一次点击");
}
el.onclick = function (){
console.log("这是第er次点击");
}
</script>

//显示效果为第二次点击，第一个事件被第二个覆盖了

DOM Level 2 Event

---

• 为了解决事件覆盖的问题引入了addEventListener从而添加多个多个事件处理函数

addEventListener()包含三个参数分别为事件的类型 (如 "click" 或 "mousedown")—事件触发后调用的函数—布尔值用于描述事件是冒泡还是捕获（可选的，默认为false,true则为添加捕获阶段的事件处理函数，否则为添加冒泡阶段的事件处理函数）

<div id="hyq" style="width: 100px;height: 100px; background-color: #5afcff">
    <div id="hyy" style="width: 50px;height: 50px;background-color: #ff9afd"></div>
</div>

    <script>
        var el = document.getElementById("hyq");
        var ek = document.getElementById("hyy");
        el.addEventListener('click',function () {
            console.log("this is first");
        },true);
        el.addEventListener('click',function () {
            console.log("this is seconed");
        });
        ek.addEventListener("click",function () {
            console.log("heiheihei");
        });
        ek.addEventListener("click",function () {
            console.log("hahahaha");
        },true);
    </script>

显示的结果

其中hahahaha设置了捕获，但因为当前对象就是目标对象，捕获无效。该函数仍然作用于目标阶段。 既然捕获失效，那么它的执行顺序就按照注册事件的顺序了，不会因为它设置了无效的捕获而提前得到执行。

---

• removeEventListener(type, listener， Capture)方法，用来移除事件处理函数。

<div id="hyq"></div>

<script>
var el =  document.getElementById("hyq");
el.addEventListener('click',function () {console.log("Hello world!"); });
el.removeEventListrner('click',function () { console.log("Hello world!");});
</script>

*callback是必选参数！capture默认值为false *