js事件委托基本原理:
将子元素的事件委托给父元素来处理
就算父级下面暂时还没有子元素
待到子元素节点出来后一样可以触发事件
如果要删除ul下面的每个li,点击li即可删除
传统做法:
循环给每个li绑定事件,通过点击li删除自身
但是新增的li节点并不会绑定事件
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let li = document.querySelectorAll('li')
let ul = document.querySelector('ul')
for(let i = 0;i<li.length;i++){
li[i].onclick = function(){
ul.removeChild(this)
}
}
</script>
</body>
所以要用到事件委托来做
把li的事件绑定到ul身上:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let ul = document.querySelector('ul')
ul.onclick = function(e){
ul.removeChild(e.target)
}
</script>
</body>
可以打印e.target
得到的是li元素的自身
js事件冒泡
点击子元素也会触发父元素的事件
<body>
<div>
<p>12312</p>
</div>
<script>
let body = document.querySelector('body')
let div = document.querySelector('div')
let p = document.querySelector('p')
body.onclick = function(){
console.log('body');
}
div.onclick = function(){
console.log('div');
}
p.onclick = function(){
console.log('p');
}
</script>
</body>
点击p标签,也会触发body和div的事件
如何解决呢?
我们可以加上e.stopPropagation来阻止事件冒泡
<body>
<div>
<p>12312</p>
</div>
<script>
let body = document.querySelector('body')
let div = document.querySelector('div')
let p = document.querySelector('p')
body.onclick = function(){
console.log('body');
}
div.onclick = function(){
console.log('div');
}
p.onclick = function(e){
e.stopPropagation();
console.log('p');
}
</script>
</body>
这样点击p标签就不会触发div和body的事件