事件委托
js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上，事件代理就是本来加载子元素身上的事件，加在其父元素身上，其问起产生了，那么多的子元素怎么区分事件本应该是哪个子元素的。 答案就是event对象记录的事件源，他就是发生事件的子元素；
事件委托的好处？
1、效率高，比如不用for循环
2、js新生成的子元素也不用新其添加事件，程序逻辑比较方便
例子1. 页面有个ul包含着4个li，鼠标移动到li上，li背景变成粉色，移出，背景恢复原色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<ul id="demo">
<li>1111111111</li>
<li>22222222222</li>
<li>333333333333</li>
<li>44444444444444444444444</li>
</ul>
<button id="btn">新增li</button>
</body>
<script type="text/javascript">
var oUl = document.getElementById(‘demo‘)
oUl.onmouseover = function(ev) {
var ev = ev|| window.event;
var oLi = ev.srcElement|| ev.target
console.log(ev)
console.log(oLi)
console.log(oLi.nodeName)
if (oLi.nodeName.toLowerCase() == ‘li‘) {
oLi.style.background = ‘pink‘
}
}
oUl.onmouseout = function(ev) {
var ev = ev || window.event;
var oLi = ev.srcElement||ev.target
if (oLi.nodeName.toLowerCase() == ‘li‘) {
oLi.style.background = ‘‘
}
}
var btn = document.getElementById(‘btn‘)
btn.onclick=function(){
var newLi = document.createElement(‘li‘)
newLi.innerHTML = new Date()
oUl.appendChild(newLi)
}
</script>
</html>
原文地址：https://www.cnblogs.com/chailuG/p/11272837.html
时间： 2024-08-08 20:32:25