事件流
描述的是在页面中接受事物的顺序
接收事物的顺序
- 事件冒泡
由最具体的元素接收，然后逐级向上传播至最不具体的元素节点（文档）
- 事件捕获
最不具体的节点接收事件，而最集体的节点应该是最后接收事件
事件处理
html事件处理
直接添加到HTML结构中
<button id="btn1" onclick="demo()">按钮</button>
<script>
function demo(){
alert("Hello");
}
</script>
这种处理方式，存在修改函数名，需要到html中修改事件调用的函数名的问题
DOM0级事件处理
把一个函数赋值给一个事件处理程序属性
解决了HTML事件处理的问题
<button id="btn1">按钮</button>
<script>
var btn1=document.getElementById(btn1);
btn1.onclick=function(){
alert("Hello");
};//这样写的话，前面的事件会被覆盖
btn1.onclick=function(){
alert("Hello2");
};
//清除事件
btn1.onclick=null;
</script>
仍然存在问题，当有多个事件时，前面的事件会被覆盖，只执行最后一个事件处理
DOM2级事件处理
- addEventListener("事件名", "事件处理函数", "布尔值");
true：事件捕获
false：事件冒泡
- removeEventListener();
<div id="divid">
<button id="btn1">按钮</button>
</div>
//这样写就不会覆盖前面的事件
<script>
var btn1 = document.getElementById(btn1)
btn1.addEventListener("click", function(){
alert("Hello")
});
btn1.addEventListener("click", function(){
alert("Hello2")
});
</script>
存在IE8及以下版本不支持该事件处理方法
IE事件处理程序
- attachEvent
- detachEvent
一个支持各浏览器的的事件处理demo
<button id="btn1">按钮</button>
<script>
var btn1 = document.getElementById("btn1");
if (btn1.addEventListener){
btn1.addEventListener("click", demo);
} else if (btn1.attachEvent){
btn1.attachEvent("onclick", demo);
} else {
btn1.onclick = demo();
}
function demo() {
alert("Hello");
}
</script>