事件委托(事件代理)
优点:
- 提高性能:每一个函数都会占用内存空间,只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
- 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。
原理:
利用事件冒泡的原理,把事件委托给父级去做
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
<body>
<ul id="ul">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<script type="text/javascript">
var ul=document.getElementById("ul");
ul.onclick=function(event){
var event=event||window.event;
// console.log(this); //输出的是父级
// console.log(event); //输出的是子级
// console.log(event.target); //输出的是子级,target返回事件的目标节点
console.log(event.target.innerHTML); //输出子级内容
}
</script>
</body>
举例:登录切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#box {
width: 555px;
height: 300px;
background-color: #004085;
margin: 0px auto;
position: relative;
}
#box ul {
display: flex;
width: 555px;
height: 50px;
}
#box ul li {
width: 185px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #008000;
}
#box ul li:hover {
background-color: #00FFFF;
}
#box ol li {
width: 555px;
height: 250px;
background-color: #0F6674;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<ul id="ul">
<li class="li">扫描登录</li>
<li>账号密码登录</li>
<li>手机号登录</li>
</ul>
<ol>
<li>扫描登录</li>
<li>账号密码登录</li>
<li>手机号登录</li>
</ol>
</div>
<script type="text/javascript">
var ul = document.getElementById("ul")
var olli = document.querySelectorAll("ol li");
var ulli = document.querySelectorAll("ul li");
// 向ulli添加索引
for (var i = 0; i < ulli.length; i++) {
ulli[i].index = i;
}
//利用事件委托,获取点击元素
ul.onclick = function(event) {
var event = event || window.event;
console.log(event.target.index);
var index = event.target.index;
// 利用循环,使其他olli隐藏
for (var i = 0; i < olli.length; i++) {
olli[i].style.display = "none";
}
// 当前olli显示
olli[index].style.display = "block";
// console.log(olli[index])
}
</script>
</body>
</html>