用户投稿这里要来补充一个小知识，在 .addEventListener() 这个事件监听的方法，还有第三个参数，只是没有设定时，预设会是 false
即一个元素的点击事件正常会如下:
el.addEventListener('click',function(){ alert('Hello');},false);而这个第三个参数到底有什么用途呢?
当我们今天的 HTML 架构如下:
<body class="body"> <div class="box"></div></body>然后给一下 .box 一些样式
.box{ width: 150px; height: 150px; background: black;}此时，应该会有一个黑色的正方形在页面上
这时候来设置 .box 和 .body 的点击事件
var elBox = document.querySelector('.box');elBox.addEventListener('click',function(){ alert('box');},false);var elBody = document.querySelector('.body');elBody.addEventListener('click',function(){ alert('body');},false);而当我们点击黑色正方形的时候，会发生什么事情?
这时候会先弹跳视窗显示 box 再弹跳视窗显示 body
当第三个参数为 false，元素之间彼此重叠且都有设定事件时，会由指定元素往外层扩散出去
若为 true，则反之:
var elBox = document.querySelector('.box');elBox.addEventListener('click',function(){ alert('box');},true);var elBody = document.querySelector('.body');elBody.addEventListener('click',function(){ alert('body');},true);这时候反而会先弹跳视窗显示 body 再弹跳视窗显示 box，会由最外层的元素一层一层往内到指定的元素
而对于上述的两种现象，分别有各自的名字
当为 false 时，叫做事件冒泡，因为就像气泡一样，一层一层往上扩散
当为 true 时，叫做事件捕捉，就像在一大片空地上寻找指定的猎物
目前还没有实用到的机会，但希望这个小知识能补充给大家 
另外，如果元素彼此重叠，不想执行事件冒泡或者事件捕捉的时候，可对于事件本身下一个指令，如下：
var elBox = document.querySelector('.box');elBox.addEventListener('click',function(e){ e.stopPropagation(); alert('box');},false);关键在于 function 内有带一个 e 参数，即是指事件本身，而 .stopPropagation() 就是去停止上述的两种现象
微信扫一扫打赏
支付宝扫一扫打赏
