JavaScript事件详解

事件流
事件流
描述的是在页面中接受事件的顺序
事件冒泡
由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)
事件捕获
最不具体的节点先接收事件,而最具体的节点应该是最后接收事件
 
事件处理
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() : 阻止事件默认行为
原文地址:https://www.cnblogs.com/baixuemin/p/6492591.html