JavaScript 事件冒泡机制

问题

事件冒泡机制

答案

事件传播机制（不管是DOM0还是DOM2，这个机制是天生就带的）；

当触发底层元素的某一个事件行为，那么它的上级元素的对应事件行为也会一级级的触发，一直出发到我们的document；（只有相同的事件类型才会触发）

从底层一级级往上传播的机制叫做冒泡；

DOM2级绑定事件，第三个参数写false代表的是冒泡阶段执行，如果写的是true，代表的是在捕获阶段执行；

同一个元素既可以在捕获阶段处理也可以在冒泡阶段处理；

DOM0级基本上只能控制冒泡阶段，而DOM2级是可以控制捕获阶段的；

事件委托

利用DOM的传播机制（点击任意元素，document的click都要出发），我们给document绑定一个点击事件，在事件中我们只需要获取事件源；根据不同的事件源做不同的事件就可以的了（这样就可以不用给元素一个个的绑定事件的了）；

当事件发生在子元素中的时候，旺旺会引起连锁反应，就是在它的祖先元素上也会发生这个事件，比如说你点击了div一个，也相当于点击了一个body，同样相当于点击了html，同样相当于点击了document；

理解事件传播的时候要注意两点；

一是事件本身在传播，而不是绑定在事件上的方法会传播；

二是并非所有的事件都会传播，像onfocus，onblur事件就不传播，onmouseenter和onmouseleave事件也不会传播；

我们要知道常见的事件默认行为有哪些，并且要知道组织默认行为，只要绑定到这个行为事件的方法最后加一句，return false就可以了；

但是需要强调的是，如果你的事件绑定是用addEventListener来实现的，那么组织默认行为必须用e.preventDefault=true;

阻止事件冒泡

function (e) { 
  e.preventDefault(); 
}

事件委托：事件委托就是用事件的传播机制，无论哪一个网页元素，它的click事件都会最终传到document上，这样，则只需在document上处理click事件即可；

document.onclick=function(e){
    e=e||window.event;
    var  target=e.targrt||e.srcElement;//获取事件源是关键；
    alert(target.nodeName);
    return false;
}

事件委托的关键是理解好事件源的概念；

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！