Web APIs四---事件高级

1.事件对象

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

document.addEventListener('click', function (e) {
    console.log(e)
})

常用属性:
获取鼠标的位置 e.pageX, e.pageY

document.addEventListener('click', function (e) {
    console.log(e.pageX, e.pageY)
})

获取用户按键值 e.key

// 注册键盘的事件 keyup keydown
// keydown如果摁住不松手 该事件会一直触发(缺陷)
document.addEventListener('keyup', function (e) {
    console.log(e.key)
})

2.阻止事件流动

可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

e.stopPropagation()

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)

3.事件解绑

传统on注册（L0）使用null覆盖就可以实现事件的解绑
addEventListener必须使用removeEventListener解绑
removeEventListener无法解绑匿名函数
实现事件只触发一次的效果:

btn.onclick = function () {
   console.log(1)
   btn.onclick = null
}

function fn() {
   console.log(123)
   btn.removeEventListener('click', fn)
}
btn.addEventListener('click', fn)

4.阻止浏览器默认行为

如链接点击不跳转，表单域的不提交

e.preventDefault()

5.事件委托

做法：把事件委托注册给父元素（祖先元素）
优点：可以提高性能 + 动态创建的新元素也可以注册上事件
原理：事件冒泡
结合e.target.tagName使用,如给p元素的父元素box添加委托

box.addEventListener('click', function (e) {
    // e.target 可以得知触发事件的元素到底是谁
    // tagName属性获取元素的标签名 返回的是全大写的字符串
    if (e.target.tagName === 'P') {
      alert('哈哈')
    }
})