事件冒泡及事件捕获

事件冒泡及事件捕获

---

一、概念

• 事件冒泡 :事件从子到父依次触发,顺序为点击元素=>父元素=>…=>body=>document=>window
• 事件捕获 :事件从父到子依次触发

浏览器绑定事件有两种方式:
1.直接通过元素绑定:

<div  onclick="alert('直接在元素上绑定事件')"></div>

2.通过js的addEventListener方式为元素绑定事件，如：

<!-- addEventListiener方法,第一个参数为事件名称,第二个参数为调用的方法,-->
<!-- 第三个参数默认为false,可不填,为true时执行事件捕获-->
window.addEventListener('click', function () { console.log(6) }, true)

二、阻止事件冒泡

1.js阻止冒泡event.stopPropagation();

在哪一层调用这个方法,就从哪一层阻止冒泡

return false网上均说在jquery中可以阻止事件冒泡和默认事件,但我自己使用过程中只阻止了默认事件

event.preventDefault(),阻止元素的默认事件的执行.
在默认事件和冒泡事件同时存在时,先执行事件冒泡,再执行默认事件.在阻止默认事件的本身及冒泡元素中任意一层调用阻止默认事件方法,都可阻止默认事件>阻止默认事件,