DOM事件流

DOM事件流

标签.addEventListener(“click”,fun,是否捕获);

是否捕获：默认是false false：冒泡 true：捕获

DOM事件流：两个机制

• 事件捕获机制：事件发生的时候，事件从window开始,根据结构一层一层往里查找，一直到目标元素位置(不处理事件)
• 事件冒泡机制：由目标元素开始处理事件，处理完成以后将事件根据结构依次传递给父元素，一直到window

​ window–document–body–标签

var oDiv = document.getElementsByTagName("div");
function fun(){
    alert(this.id);
}

oDiv[0].addEventListener("click",fun,false);
oDiv[1].addEventListener("click",fun,false);
oDiv[2].addEventListener("click",fun,false);

 <div style="padding: 30px;background:teal" id="box1">
     <div style="padding: 30px;background:tan" id="box2">
         <div style="padding: 30px;background:pink;position: absolute;top:300px" id="box3" ></div>
     </div>
</div>

• 阻止事件冒泡

• 标准浏览器： event.stopPropagation();

• ie浏览器：event.cancelBubble = true;

   oBtn.onclick = function(ev){
       var ev = window.event||ev;
       //兼容
       ev.stopPropagation ? ev.stopPropagation():ev.cancelBubble = true;
       console.log("点击按钮");
   }
  oDiv.onclick = function(){
      console.log("点击div");
  }
  

2.2.4阻止事件默认行为

• 默认行为：标签，浏览器自带的默认的操作

  • a的默认跳转、双击默认选中文字、拖拽图片默认保存、submit默认提交、右击默认显示菜单等

• 阻止默认行为：

  添加事件的方式	阻止默认行为
  标签.事件	return false
  标签.addEventListener	ev.preventDefault()
  标签.attachEvent	ev.returnValue = false