<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list" class="list">
<li class="item" data-index="0">
事件委托代理演示1111
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="change">修改</a>
</li>
<li class="item" data-index="1">
事件委托,事件代理演示222
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="change">修改</a>
</li>
<li class="item" data-index="2">
事件委托,事件代理演示333
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="change">修改</a>
</li>
<li class="item" data-index="3">
事件委托,事件代理演示444
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="change">修改</a>
</li>
</ul>
<script>
// 需求:点击 li 中的内容 提示点击了 第 n 条内容
// 点击删除, 删除当前行
// 点击修改,弹出一个遮罩层,里面显示要修改的内容
// 里面有一个确认修改按钮,点击后将修改内容回显到指定位置
// 利用普通方式实现
// function $(selector) {
// return document.querySelectorAll(selector);
// }
// var items = $(".item");
// var dels = $(".del");
// var cs = $(".change");
// for (var i = 0; i < dels.length; i++) {
// (function (j) {
// dels[j].onclick = function () {
// alert("您当前点击了第" + (j + 1) + "条内容")
// }
// })(i)
// dels[i].onclick = function (e) {
// e.stopPropagation();
// alert("删除成功")
// }
// cs[i].onclick = function (e) {
// e.stopPropagation()
// alert("修改成功")
// }
// }
// 利用事件委托的方式实现, 将子元素需要处理的事件交给父元素
// 注意:必须是同种类型的事件
var list = document.getElementById("list");
list.onclick = function (e) {
// 获取目标对象 兼容性写法
var t = e.target || e.srcElement;
var cls = t.className;
switch (cls) {
case "item":
alert("您点击了第" + (Number(t.getAttribute('data-index')) + 1) + " 条内容");
break;
case "del":
alert("删除成功...")
t.parentNode.remove();
break;
case "change":
alert("修改成功")
break;
}
}
</script>
</body>
</html>
js 中的事件委托事件
最新推荐文章于 2024-08-09 16:54:24 发布