前端中的事件流

  面试题中的一道题目。

  事件流：描述的是事件发生的顺序。

  包含的三个阶段：

•     事件捕获阶段
•     处于目标阶段
•     事件冒泡阶段

事件捕获阶段

这是一个从上而下的过程，越高级的父级元素越早接到事件。

例：

1.  如点击li元素会先触发ul元素。

注意：如果在li上绑定click事件，那么新添加的li元素不会有这个click事件。此时应该在ul上绑定事件，根据事件捕获的原理，事件会自上而下传递给li。通过event.target找到这个li元素。

这种方式被称为事件委托。

2.  目标元素有子元素。如希望绑定到li上，但li有子元素，则event.target变成了子元素。

此时需要组织事件捕获的传递。这个时候可以给子元素添加css:  li>* {pointer-events:none;}

jquery通过on方法解决了这个问题： $('ul').on('click','li',function(event){//code});

 

事件冒泡

让DOM树最底层的目标元素最先接收到事件，然后向上传递，是一个自下而上的过程。

如button和button的父元素都添加了click事件，当点击button的时候，button和其父元素的点击事件都会执行，自下而上的顺序执行。这个事件需要阻止冒泡事件。

解决方法：

$('button').click(function(e){   //可以是任何需要阻止冒泡的元素。

   e.stopPropagation();

//ie

  e.cancelBubble = true;

})

 

 

一些不支持冒泡的事件：

blur:元素失去焦点时触发，不支持冒泡。

focus: 元素获得焦点时触发，不支持冒泡。

mouseenter:鼠标移入元素触发，不支持冒泡。

mouseleave：鼠标移出元素时触发，不支持冒泡。

 

转载于:https://www.cnblogs.com/lionisnotkitty/p/7240077.html