一、自定义事件
文件描述太干了,直接看代码吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id=div1>
<button id=button1>点击触发 frank 事件
</button>
</div>
<script>
button1.addEventListener('click', ()=>{
const event = new CustomEvent("my", {"detail":{name:'doub', age: 18}})
button1.dispatchEvent(event)
})
button1.addEventListener('my', (e)=>{
console.log('doub')
console.log(e)
})
</script>
</body>
</html>
上面代码就是自定义了一个事件,名称叫做my
二、事件委托
就是让别人帮我做我应该做的事情,实质上就是监听祖先元素
-
要给100个按钮添加点击事件,就可以监听这100个按钮的祖先,等冒泡的时候判断target是不是这100个按钮中的一个
-
要监听目前不存在的元素的点击事件,可以监听祖先,等点击的时候看看是不是我想要监听的元素
事件委托的优点:
- 省监听的内存
- 可以监听动态元素