JavaScript 事件冒泡 事件捕获 取消事件冒泡 取消默认事件

//事件冒泡:结构上存在(非视觉上)嵌套关系的元素,会存在冒泡的功能,即同一事件,自子元素冒泡向父元素,自底向上.
//即如果一个点击事件发生在子元素上,它会一级级向父元素冒泡.
//注意:是结构上从子元素冒向父元素.
//例如:  如果div1 div2 div3都绑定了点击事件,点击div3, div3 div2 div1 的点击事件都会触发,触发顺序是3到1,从结构的底层向上冒泡.(其中div1和div2是事件冒泡,div3是事件执行,因为点的就是它).

  <div>div1
      <div>div2
          <div>div3</div>
       </div>
  </div>

//事件捕获:结构上存在(非视觉上)存在嵌套关系的元素,会存在捕获的功能,即同一事件,自父元素捕获向子元素(事件源元素),自上向下.
//例如:如果div1 div2 div3都绑定了点击事件,点击div3, div1 div2 div3 的点击事件都会触发,触发顺序是1到3(其中div1和div2是事件捕获,div3是事件执行,因为点的就是div3).

//IE上没有事件捕获

//同一个对象的同一个事件类型,绑定了两个事件处理函数,一个遵循冒泡,一个遵循捕获,那么先捕获,后冒泡.

//focus blur change submit reset select 等事件不冒泡

 

//事件是天生就有的,一个元素不绑定事件,它也会向上冒泡,只是它自己没有事件处理程序需要执行,如果父级有绑定事件处理函数,会触发父级的绑定从而执行对应的函数.
//例如:假设div1绑定了点击事件,div2没有绑定事件,但是点击div2,依然会冒泡到div1,即div1的点击事件会被触发执行.

//取消冒泡
//W3C标准: event.stopPropagation() ---->此方法不支持IE9以下版本
//IE独有: event.cancleBubble = true

//写法
elem.onclick = function (e){
//e.stopPropagation() //取消冒泡
e.cancleBubble = true
}


//封装取消冒泡的函数

    function stopBubble(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else if(event.cancleBubble){
            event.cancleBubble = true;
        }
    }

//取消默认事件
//方法1 return false

//封装取消默认事件函

    function cancelHandler(e){
        if(e.preventDefault){
            e.preventDefault();  //方法2 W3C   IE9以下不兼容
        }else{
            e.returnValue = false;  //方法3  兼容IE
        }
    }