前端中的事件流
面试题中的一道题目。
事件流:描述的是事件发生的顺序。
包含的三个阶段:
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
事件捕获阶段
这是一个从上而下的过程,越高级的父级元素越早接到事件。
例:
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:鼠标移出元素时触发,不支持冒泡。