<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<style>
ul{
padding: 20px;
list-style: none;
}
</style>
</head>
<body>
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
var ul = document.getElementById(‘ul‘);
ul.onmouseover = function (ev) {
var ev = ev || window.event,
target = ev.target || ev.srcElement; //获取事件源
if (target.nodeName.toLowerCase() == "li") {
target.style.background = "red";
}
}
ul.onmouseout = function (ev) {
var ev = ev || window.event,
target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() == "li") {
target.style.background = "";
}
}
</script>
</body>
</html>
事件委托:利用事件冒泡的原理,把事件添加到父级或祖先元素上,来触发执行效果.
好处:
1.提高性能.
2.未来添加进来的元素,身上依然能触发事件.
时间： 2024-07-29 21:37:07