DOM事件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44499465/article/details/114378689

1.绑定事件

1.绑定使事件

传统方式 element.onclick = function () {}
addEventListener(‘type’, listener[, userCapture])
type: 事件类型，如click、mouseover
listener：事件处理函数
useCapture：默认false（可选），如果为true则处于捕获阶段

2.解绑事件

传统解绑 element.onclick = null
removeEventListener(‘type’, listener[, userCapture])

btn.addEventListener('click', fn)
function fn () {
	alert('adga')
	btn.removeEventListener('click', fn)
}

3.DOM 事件流

捕获阶段
当前目标阶段
冒泡阶段
只能是捕获阶段或者冒泡阶段。
有些事件没有冒泡如onblur、onfocus、onmousenter、onmouseleave

冒泡演示：

let son = document.querySelector('.son')
son.addEventListener('click', function () {
	alert('son')
}, false)
let father= document.querySelector('.father')
father.addEventListener('click', function () {
	alert('father')
}, false)

4.事件对象

div.onclick = function(event) {}

event就是一个事件对象，在回调函数形参里，包含了事件的一系列数据集合，如点击事件的事件对象就包含了的鼠标坐标等信息。

事件对象的属性

e.target 返回的是触发事件的对象（元素），this 返回的是绑定事件的对象
e.type 事件类型，如click
e.prenentDefault() 阻止默认行为
e.stopPropagation() 标准阻止冒泡，e.cancleBuble = true非标准

5.事件委托

<ul>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有弹框在手</li>
</ul>

点击每个li都会弹出对话框，以前需要给每个li注册事件，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。

事件委托原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

事件委托的作用

我们只操作了一次DOM,提高了程序的性能。

const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
	alert('123456')
	e.target.style.backgroundColor = 'pink' //点击到的变粉红
})