javascript事件委托代码实例
分类：实例代码
分享一段代码实例，它演示了javascript事件委托功能。
所谓的事件委托就是将自己的事情委托给别人干。
比如下面的代码就是，本来应该注册在li身上的事件处理函数，利用冒泡效果注册在父元素ul身上。
代码实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
li {
height: 30px;
line-height: 30px;
background: #ccc;
list-style-type: none;
margin: 3px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oUl = document.getElementById('ul');
var oLi = oUl.getElementsByTagName('li');
var num = oLi.length;
function addEvent(ele, type, fn) {
if (ele.addEventLisenter) {
ele.addEventLisenter(type, fn, false)
} else if (ele.attachEvent) {
ele.attachEvent("on" + type, fn)
} else {
ele["on" + type] = fn;
}
}
function clickFn(event) {
var event = event || window.event;
var tar = event.target || event.srcElement;
for (var index = 0; index < oLi.length; index++) {
oLi[index].style.color = "";
}
if (tar.nodeName.toLowerCase() == "li") {
tar.style.color = 'red'
}
}
addEvent(oUl, 'click', clickFn);
}
</script>
</head>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
上面的代码实现的效果是可以将当前点击的li元素字体颜色设置为红色。
我们并没有给li元素直接注册click事件处理函数，而是注册在它的父元素之上，利用冒泡原理，将自己的事情交给父元素做。
javascript事件委托代码实例，这样的场景在实际项目中还是用的比较多的，关于javascript事件委托代码实例就介绍到这了。
javascript事件委托代码实例属于前端实例代码，有关更多实例代码大家可以查看。
