事件对象

事件对象是什么？

也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

元素.addEventListener('click',function(e)(这个是事件对象))

事件对象常见属性

e.clientX/e.clientY (鼠标单击位置参照视口的坐标值)
e.offsetX/e.offsetY (鼠标单击位置参照元素左上角的坐标值)
e.screenX/e.screenY (鼠标单击位置参照屏幕左上角的坐标值)

事件流指的是事件完整执行过程中的流动路径

阻止事件流动

阻止事件冒泡： 1.先要明确哪一块区域不能冒泡 2.需要阻止什么事件传递就给这块区域的最大盒子注册事件 3.在事件处理函数里面接受事件对象，并添加上e.stopPropagation()

事件对象.stopPropagation()

阻止默认行为

e.preventDefault()

<body>
<a href="http://www.baidu.com">我不要跳转到百度</a>

<script>
let a = document.querySelector('a')
a.addEventListener('click', function(e) {
e.preventDefault() // 阻止默认行为
console.log('我不要跳转')
})
</script>
</body>

两种注册事件的区别： 传统on注册（L0）
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的
事件监听注册（L2）
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

总结:
给父级元素加事件事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发事件对象.target可以获得真正触发事件的元素

<body>
<div class="box">
<button>添加li元素</button>
<ul>
<li>我是第1个小li</li>
<li>我是第2个小li</li>
<li>我是第3个小li</li>
<li>我是第4个小li</li>
<li>我是第5个小li</li>
</ul>
</div>

<script>
let ul = document.querySelector('ul')
let btn = document.querySelector('button')
btn.addEventListener('click', function() {
// 创建一个未来元素
let newli = document.createElement('li')
newli.innerText = '我是新来的'
ul.appendChild(newli)
})

ul.addEventListener('click', function(e) {
if (e.target.localName == 'li') {
e.target.style.color = 'red'
}
})
</script>
</body>

DOM事件高级

事件对象

阻止事件流动