点击事件和事件冒泡

三种点击事件

1，鼠标事件

单机事件 onclick
双击事件 ondblclick
移入事件 onmouseover
移出事件 onmouseou
进入事件 onmouseenter
离开事件 onmouseleave
按下事件 onmousedown
抬起事件 onmouseup

2，键盘事件

按下事件 onkeydown
抬起事件 onkeyup

3、浏览器事件

加载完成事件 onload
滚动事件 onscroll

事件冒泡

事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。
看个例子：

 <div id="box1">
    <div id="box2"></div>
 </div>
var div1 = document.getElementById("box1");
var div2 = document.getElementById("box2");
   div2.onclick = function(){
   alert(1);
   };
   div1.onclick = function(){
   alert(2);
   };

如果点击box2 先弹出1，然后会弹出2，这说明点击的时候，不仅box2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。

阻止事件冒泡: event.stopPropagation() (重点)

 <div id="box1">
    <div id="box2"></div>
 </div>
var div1 = document.getElementById("box1");
var div2 = document.getElementById("box2");
   div2.onclick = function(){
   alert(1);
   event.stopPropagation() 
   };
   div1.onclick = function(){
   alert(2);
   };

这样就可以阻止事件冒泡，防止事件冒泡带来的影响。