DOM 事件机制

什么是DOM事件？

对DOM元素进行操作的事件
例如点击一个元素，发生了这个动作后，以便进行下一步操作。这个点击就是一个事件。

捕获和冒泡

现代浏览器的事件包含捕获阶段和冒泡阶段。捕获阶段在先，冒泡发生在后。
这里有一个id=div1的元素，其内部包含一个class=div2的元素。

<div id="div1">
	<div id="div2">
		<div id="div3"></div>
	</div>
</div>

那么点击div2时，捕获和冒泡是怎样执行呢？
首先从div1开始了捕获阶段，事件向下走到div2，再走到div3，捕获阶段结束。
然后又从div3开始冒泡阶段，向上走到div2，再走到div1，冒泡阶段结束。

冒泡有时可阻止，捕获永远不可以阻止

冒泡阶段可以用stopPropagation来阻止冒泡

div1.addEventListener('click',()=>{
	e.stopPropagation()
})

这样捕获阶段走完后，就不会继续冒泡了

事件是可以自定义的

自定义写法

button1.addEventListener('click',()=>{
	const event = new CustomEvent('frank',{ //frank事件名
    	detail:{name:'frank',age:19}, //这个是事件属性
        bubbles:true, //表示frank事件可以冒泡
        cancelable:false //表示不能阻止冒泡
    })
    button1.dispatchEvent(event)
})
//调用了自己定义的frank事件
button1.addEventListener('frank',(e)=>{
	console.log(e.detail)
})

事件委托

如果有100个按钮，都要有点击事件，怎样用最省的办法实现？事件委托！
利用冒泡，监听div的事件，当点击的是button时，就执行自己的代码。
除了省内存，还可以监听到动态添加的元素。

<div id=“div1”>
	<button></button>
	<button></button>
	......
	<button></button>
	<button></button>
</div>

div1.addEventListener('click',(e)=>{
	const t = e.target //被操作的元素
    if(t.tagName.toLowerCase() === 'button'){
    	console.log('button 被点击了')
    }
})