事件冒泡机制

一、单机事件冒泡机制

• 子父元素具有click，执行的时候会冒泡执行（由里向外执行该事件）

<div id="box" style="width: 100px;height: 100px;background-color: orangered">
   <button id="btn">按钮</button>
</div>
<script>
	var num = 0;
   btn.onclick = function(){
       num++;
       console.log(this,num);
   }
   box.onclick = function(){
       num++;
       console.log(this,num);
   }
</script>

二、如何处理事件冒泡

• return false----原生js里面不能阻止事件冒泡
• 通过事件执行参数event来解决

1. e.stopPropagation()处理事件冒泡

• 下面的event是事件对象，也可以直接写在事件的执行函数上（以形参的形式）

var num = 0;
btn.onclick = function(){
  num++;
  console.log(this,num);
  var e = window.event||event;
  e.stopPropagation();
}

var num = 0;
btn.onclick = function(e){
  num++;
  console.log(this,num);
  console.log(e);
}

输出MouseEvent事件执行参数对象

var num = 0;
btn.onclick = function(e){
  num++;
  console.log(this,num);
  e.stopPropagation();
}
box.onclick = function(){
  num++;
  console.log(this,num);
}

2. e.cancelBubble = true处理事件冒泡

var num = 0;
btn.onclick = function(e){
  num++;
  console.log(this,num);
  e.cancelBubble = true;
}
box.onclick = function(){
  num++;
  console.log(this,num);
}