<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script>
/*
委托:
A委托B去买饭。
A发布任务 委托方
B执行任务 代理方
*/
/*
事件委托实现步骤:
1、找到当前节点的父节点或者祖先节点
2、将事件添加到你找到的这个父节点或者祖先节点上
3、找到触发对象,判断触发对象是否是想要的触发对象,进行后续的操作
li委托ul将li变成红色
1、浪费
2、后添加的li节点没有点击事件
【注】事件委托的原理是事件冒泡。
*/
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.backgroundColor = 'red';
}
}
var obtn = document.getElementById("btn1");
var i = 6;
obtn.onclick = function(){
var newNode = document.createElement("li");
newNode.innerHTML = i++ * 1111;
oUl.appendChild(newNode);
}
}
</script>
</head>
<body>
<button id = 'btn1'>新增节点</button>
<ul id = 'ul1'>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>
</html>
用事件委托 实现点击li会把背景变红
最新推荐文章于 2024-06-10 17:00:16 发布