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 *
