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('哈哈')
}
})
