关于事件委托的问题

weixin_43953947 2020-05-18 01:47:29

<body>
<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// alert('知否知否，点我应有弹框在手！');
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';

})
</script>
</body>

点击li背景颜色会变成粉红色，但我想在下一次点击li的时候把之前点击过的背景颜色变回原本那样，这个怎么实现？

...全文

152 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

那谁呀撒 2020-05-21

打赏
举报

是不是点哪个哪个变粉，其他的变白？
<body>
<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
var lis = document.querySelectorAll("li");
ul.addEventListener('click', function(e) {
Array.prototype.forEach.call(lis, function(value) {
if (value == e.target) {
value.style.backgroundColor = "pink";
} else {
value.style.backgroundColor = "white";
}
});
})
</script>
</body>

Let dreams fly 2020-05-19

打赏
举报

<script>
	var ul = document.querySelector('ul');
	ul.addEventListener('click', function(e) {
		e.target.style.backgroundColor = e.target.style.backgroundColor=='pink'?'white':'pink';
	})
</script>

金旭亮《C#面向对象程序设计》教案_6：委托与事件。此教案重点介绍.NET平台上的重要技术——委托，以及对建立于委托基础之上的.NET事件响应机制的深入剖析。包括两个29页的PDF文档及数个VS2010示例。前几讲的教案请访问http://bitfan.download.csdn.net/下载，更新信息及讨论请关注金旭亮博客：http://blog.csdn.net/bitfan