事件冒泡和事件代理
Posted 樱桃小丸子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡和事件代理相关的知识，希望对你有一定的参考价值。
事件冒泡：
元素触发事件时，会往上冒泡，触发所有父元素的事件，直接到body
比如：点击p标签，会触发p，div，body对应的事件
e.stopPropagation()可以阻止向上冒泡，即只会触发p的对应的事件
<body>
<div id="div1">
<p id="p1">事件冒泡</p>
</div>
<script>
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, e=>{
let target
if (selector) {
target = e.target
if (target.matches(selector)) {
fn.call(target, e)
}
} else {
fn(e)
}
})
}
const p1 = document.getElementById(\'p1\')
const div1 = document.getElementById(\'div1\')
const body = document.body
bindEvent(p1, \'click\', e=>{
// e.stopPropagation()
alert(\'p1事件\')
})
bindEvent(body, \'click\', e=>{
alert(\'body事件\')
})
bindEvent(div1, \'click\', e=>{
alert(\'div1事件\')
})
</script></body>
事件委托：根据事件冒泡原理，给想要加事件元素的父元素增加事件，这样可以大大的减少浏览器的内存占用
比如点击a1，或者a2，都会触发alert
<body>
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
<script>
const div1 = document.getElementById(\'div1\')
div1.addEventListener(\'click\', e=>{
e.preventDefault()
const target = e.target
if (target.nodeName === \'A\') {
alert(target.innerhtml)
}
})
</script></body>
以上是关于事件冒泡和事件代理的主要内容，如果未能解决你的问题，请参考以下文章