一个场合, 事件捕获派上了用处

场景:

　　(比较少见) 如果有个js生成的dom元素, 里面绑定了一些click 事件, 我们想在不hack原先代码的情况下, 把dom 里面的事件拦截.

思路:

　　事件机制有捕获和冒泡, 现在主流浏览器的事件都是冒泡机制, 即从事件发生的dom元素开始层层向上出发, 对于我们要拦截的dom, 显然没法在它的更深层次 event.stopPropagation(), 所以目标dom始终会被先触发.

　　换个思路, 捕获机制则相反, 从顶层的dom元素开始层层深入, 这就给了拦截一个机会. 找到目标dom 的外层元素, 阻止事件传递即可.

代码:

1 <div class="outer">
2     <div class="inner">
3         hello
4     </div>
5 </div>

 1 $(function () {
 2     $inner = $(".inner");
 3     $inner.on(‘click‘, function () {
 4         console.log(‘inner‘);
 5     })
 6     document.querySelector(".outer").addEventListener("click", function (event) {
 7         console.log(‘outer‘);
 8         event.stopPropagation();
 9     }, true);
10 })

addEventListener 的第三个参数是捕获模式标志位.

点击outer内部的任意区域, inner 都不会被触发, 只会输出:

"outer"  ("inner" 将会被拦截, 不打印)