您的位置：首页 > 其它

事件委托

2015-10-06 15:53 357 查看

<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementById("bubble");
var aLi = aUl.getElementsByTagName("li");

for(var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function () {
this.style.backgroundColor = "blue";
};
aLi[i].onmouseout = function () {
this.style.backgroundColor = "";
}
aLi[i].onclick = function () {
alert(aLi[i]);
}
}
};
</script>
</head>
<body>
<div>
<ul id = "bubble">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>

通过for循环可以实现事件的绑定，但是又与作用链的存在，又导致了一个经典问题

这里当你点击li标签的时候，都返回undefined，而不是说对应的0，1，2，3。因为变量无法贮存在内存当中。

解决这个问题有三种方式：（1）闭包，（2）添加新的属性，（3）事件委托

<head lang="en">
<meta charset="UTF-8">
<title></title>

<script type="text/javascript">
window.onload = function () {

function addEvent(doc, lab, eventarg, func) {

if (window.addEventListener) {
doc.addEventListener(eventarg, function (evt) {
var ev = evt;
var tag = ev.target;

if (tag.nodeName.toLowerCase() == lab.toLowerCase()) {
func(tag);
}

}, false);
}
else if (window.attachEvent) {
doc.attachEvent('on'+eventarg, function (evt) {
var ev = window.event;
var tag = ev.srcElement;

if (tag.nodeName.toLowerCase() == lab.toLowerCase()) {
func(tag);
}
});
}
}

var uls = document.getElementById('bubble');
function test(tag) {
alert(tag.innerHTML);
}
addEvent(uls, 'li', 'click', test);

};
</script>
</head>
<body>
<div>
<ul id = "bubble">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>

这里就写了一个事件委托的解决方式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航