DOM 事件模型与 事件机制

DOM事件模型

DOM事件流程分为以下几个阶段：

1. 捕获阶段

//捕获阶段是指用户在某个元素上触发事件后，元素依次从windows、document、body触发该事件，直到该元素截止

2. 目标阶段
3. 冒泡阶段

//冒泡阶段是指用户触发某个元素事件后，元素会依次从该元素往上触发事件

通过addEventListener监听事件在那个阶段执行,默认在冒泡阶段执行。一个事件流的例子：

链接地址：jsbin.com/buzohedeva/…

如何阻止事件冒泡？

可以通过e.stopPropagation()来阻止事件冒泡、通过e.preventDefault()来阻止默认行为

区分e.target和e.currentTarget

e.target：指的是用户点击的元素

e.currentTarget指的是绑定监听的元素(this指向的元素)

<div id="button1">
    <div id="paint">
    </div>
 </div>
 
 

button1.addEventListener('click', function(e) {
     console.log("target", e.target)
     console.log('current', e.currentTarget)
})

当点击id为paint的元素的时候，target的值是paint元素，而currentTarget的值始终是button1