<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委派</title>
</head>
<body>
<input type="button" id="input1" value="添加LI">
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
window.onload = function () {
var oInput = document.getElementById('input1');
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
/*
* 引子：
* 给每个LI添加鼠标事件，改变背景颜色
* */
/*for ( var i = 0; i < aLi.length; i++ ) {
// 为每个按钮都添加鼠标移入移除事件
aLi[i].onmouseover = function () {
this.style.background = 'red';
}
aLi[i].onmouseout = function () {
this.style.background = '';
}
}*/
/*
* 思考？
* ①为每个li添加一个事件，影响性能
* ②是否再添加一个li后，将相应的事件却不会添加进去
* */
var text = 4;
oInput.onclick = function () {
text++;
var newInput = document.createElement('li');
newInput.innerHTML = text * 111;
// 将新的li添加到ul的末尾
oUl.appendChild(newInput);
}
/*
* 因此我们需要通过事件委派来完成它
* 事件委派？就是让一个下属分别干的事情交给上司办了
* 好处？
* ①提高性能
* ②为动态添加元素添加事件
* */
// 利用冒泡的原理，将事件绑定到父元素上
oUl.onmouseover = function (e) {
var e = e || window.event;
// 事件源，就是你点击的那个元素是什么
var target = e.srcElement || e.target;
if (target.nodeName.toLowerCase() === 'li') {
target.style.background = 'red';
}
}
oUl.onmouseout = function (e) {
var e = e || window.event;
// 事件源，就是你点击的那个元素是什么
var target = e.srcElement || e.target;
if (target.nodeName.toLowerCase() === 'li') {
target.style.background = '';
}
}
}
</script>
</body>
</html>
网友评论