老师，e.target指的是最内层的span，事件监听应该会冒泡到li元素，为什么碰span元素，li不变红呢？而碰li， li又变红了呢？
来源：4-22 事件委托（2）
Elisha666
2021-09-14 00:18:13
<button id="btn1">点击我添加新的列表项</button>
<ul id="list1">
<li><span>我是span</span>列表项</li>
<li><span>我是span</span>列表项</li>
<li><span>我是span</span>列表项</li>
</ul>
<script>
var oList1 = document.getElementById('list1');
var oBtn1 = document.getElementById('btn1');
oList1.onmouseover = function (e) {
e.target.style.backgroundColor = 'red';
};
oBtn1.onclick = function () {
var oLi1 = document.createElement('li');
oLi1.innerHTML = '我是新增的列表项';
oList1.appendChild(oLi1);
};
</script>
写回答
1回答
-
同学你好，理解有误，e.target表示触发事件的最早元素，即“事件源元素"，哪个元素触发了事件，哪个元素就是e.target。
在这段代码中，onmouseover事件绑定给了父元素ul，因此能够触发onmouseover事件的元素有：ul元素以及ul元素中的所有子元素，所以e.target不只是span，也可能是ul、li，如图
所以，鼠标碰到哪个元素，哪个元素就是e.target，执行e.target.style.backgroundColor = 'red'代码，背景变为红色。一般在使用事件委托时，不建议嵌套太多子元素，否则就会出现这种问题。
祝学习愉快！
1
相似问题