js事件绑定及冒泡、捕获和默认行为处理

一、    事件绑定及冒泡、捕获

1)    W3C标准的事件绑定

符合该标准的主流浏览器包括firefox、chrome、safari、IE9+、国内各种杂牌浏览器的极速模式。

核心方法：addEventListener(type,listener, useCapture);

type:事件类型，如点击的‘click’，不加‘on’。

listener:执行的操作，一般为一个匿名函数。

useCapture:是否使用事件捕获，默认为false，即事件冒泡。

<div class="a">

  <div class="b">

    <div class="c"></div>

  </div>

</div>

对应图如下：

现在添加事件绑定：

 

document.querySelector(".a").addEventListener('click',function(){

  alert("外层红色");

},false);

document.querySelector(".b").addEventListener('click',function(){

  alert("中层蓝色");

},false);

document.querySelector(".c").addEventListener('click',function(){

  alert("里层粉色");

},false);

默认选中false，即事件冒泡。

这个时候点击蓝色区域，会先弹”中层蓝色”，后弹”外层粉色”。

如果第三个参数为true，则为事件捕获。

这个时候再点蓝色区域，会先弹出”外层红色”，后弹出”中层蓝色”。

2)    IE8事件绑定

IE8的事件绑定不支持addEventListener(),而是：

attachEvent(type,listener);

type:事件类型，如点击的‘click’，加‘on’。

listener:执行的操作，一般为一个匿名函数。

IE8没有事件捕获，只有事件冒泡。默认就是事件冒泡。

  document.querySelector(".a").attachEvent('onclick',function(){

            alert("外层");

     });

有意思的是，如果在上述代码再绑定一个事件:

  document.querySelector(".a").attachEvent('onclick',function(){

            alert("外层");

     });

document.querySelector(".a").attachEvent('onclick',function(){

            alert("外层2");

     });

这个时候点击会先执行”外层2”，再执行”外层”。

这个现象在W3C标准浏览器里恰好相反，不管是捕获还是冒泡，都会先执行”外层”，再执行”外层2”.

用jQuery绑定事件，都统一执行W3C的标准，包括IE8.

二、    默认行为阻止

1)    阻止冒泡、捕获行为

事件捕获和冒泡基本用的地方不多，暂时我也举不出例子。但是不需要冒泡的地方倒是特别多。这种情况就要阻止冒泡行为了。

event.stopPropagation();

官方解释：

不再派发事件。

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点

就是阻止冒泡、捕获行为。

document.querySelector(".a").addEventListener('click',function(){

  alert("外层红色");

},false);

document.querySelector(".b").addEventListener('click',function(){

  alert("中层蓝色");

  event.stopPropagation();

},false);

 

这个时候，点击蓝色的部分就不会触发红色部分的点击事件了。

很荣幸，火狐不能这样写。火狐要求必须在匿名函数里传递event对象，不然是不生效的，但也不会报错，而且某些情况会出现其他问题。

document.querySelector(".a").addEventListener('click',function(){

  alert("外层红色");

},false);

document.querySelector(".b").addEventListener('click',function(event){

  alert("中层蓝色");

  event.stopPropagation();

},false);

先总结一下：

火狐的这个问题，在IE9、IE10上也有。但IE11和win10的edge浏览器和谷歌保持了一致，即匿名函数不需要传递event，也可以调用。

IE8下，stopPropagation()无效，有另一个执行语句代替：

window.event.cancelBubble= true;

2)    阻止浏览器默认行为

浏览器的默认行为，比如有<a>标签的超链接作用，type为submit的button按钮的表单提交效果。这个时候就可以用该方法来阻止。

  <form action="http://www.baidu.com">

            <input type="text" />

            <button type="submit">提交</button>

     </form>

当填写完这个输入框，习惯性的会按tab建，这个时候会指向button，如果按回车，那个页面会发生跳转。这个时候如果我想阻止这个表单按钮的默认提交行为就可以这么写:

    document.querySelector("button").addEventListener("keydown",function(event){

              if(event.keyCode == "13"){

                     event.preventDefault();

              }

       });

只要监听到键盘按了回车，就阻止默认行为，页面也就不会发生跳转。其它默认行为都是类似的用法。

同样的道理，对于火狐、IE9、IE10匿名函数要传递event对象。

对于IE8，要用如下执行语句来代替：

window.event.returnValue= false;