<!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>
事件委派
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 这个问题的整理是基于面试题:给同一个DOM元素绑定两个事件,一个用冒泡,一个用捕获,会执行几次?先执行冒泡还是先执...
