事件流
事件流
描述的是在页面中接受事件的顺序
事件冒泡
由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获
最不具体的节点先接收事件，而最具体的节点应该是最后接收事件
事件处理
1.HTML事件处理
直接添加到HTML结构中
2.DOM0级事件处理
把一个函数赋值给一个事件处理程序属性
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.onclick=function(){
alert("hello DOM0级事件处理程序1");
}
btn1.onclick=function(){
alert("hello DOM0级事件处理程序2"); //会把1覆盖掉
}
//清除事件
btn1.onclick=null;
</script>
3.DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");
true : 事件捕获
false : 事件冒泡
removeEventListener();
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
function demo1(){
alert("DOM2级事件处理程序1");
}
function demo2(){
alert("DOM2级事件处理程序2"); //不会覆盖前面的方法
}
btn1.removeEventListener("click",demo2);
</script>
4.IE事件处理程序《小于等于ie8》
attachEvent 添加一个事件
detachEvent 删除一个事件
<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>
事件对象
1.事件对象
在触发DOM事件的时候会产生一个对象
2.事件对象event
type : 获取事件类型
target : 获取事件目标
<script>
document.getElementById("btn1").addEventListener("click",showType);
function showType(event){
alert(event.type);
alert(event.target);
}
</script>
stopPropagation() : 阻止事件冒泡
事件一次向上传递，就发生了事件的冒泡
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
function showType(event){
alert(event.type);
alert(event.target);
event.stopPropagation(); //阻止冒泡事件
}
function showDiv(){
alert("div");
}
</script>
preventDefault() : 阻止事件默认行为