javascript委托代码实例
分享一段代码实例，它实现了事件委托效果。
所谓的委托，就是自己的事情委托给别人做；将自己的事件处理函数注册在父元素身上。
原理就是利用事件冒泡现象，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload=function(){
var ulNode = document.querySelector(".ul-box");
var oshow = document.querySelector(".antzone");
ulNode.addEventListener('click', handleClick, false);
function handleClick(evt) {
evt.preventDefault();
var target = evt.target;
var liNode = target.parentNode.nodeName.toLowerCase() === "li" && target.parentNode || target;
oshow.innerHTML=liNode.innerHTML;
}
}
</script>
</head>
<body>
<ul class="ul-box">
<li><a href="#">前端教程网一</a></li>
<li><a href="#">前端教程网二</a></li>
</ul>
<div class="antzone"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，文档内容完全加载完毕再去执行函数中的代码。
（2）.var ulNode = document.querySelector(".ul-box")，获取class属性值为ul-box的元素对象。
（3）.var oshow = document.querySelector(".antzone"),获取class属性值为antzone的元素对象。
（4）.ulNode.addEventListener('click', handleClick, false);，为ulNode注册click事件处理函数。
（5）.function handleClick(evt) {}，事件处理函数，evt是传递的事件对象。
（6）.evt.preventDefault()，阻止默认动作，也就是阻止点击链接的时候跳转动作。
（7）.var target = evt.target，获取点击的目标对象。
（8）.var liNode = target.parentNode.nodeName.toLowerCase() === "li" && target.parentNode || target，如果是点击链接a元素，那么就获取它的父元素li，如果点击的是li或者ul元素，那么就直接返回li或者ul元素。
（9）.oshow.innerHTML=liNode.innerHTML，将html内容写入oshow元素。
二.相关阅读:
（1）.document.querySelector()可以参阅document.querySelector()一章节。
（2）.addEventListener()可以参阅addEventListener()一章节。
（3）.preventDefault()可以参阅javascript preventDefault()一章节。
（4）.target可以参阅javascript event.target一章节。
（5）.parentNode可以参阅parentNode一章节。
（6）.nodeName可以参阅js nodeName一章节。
（7）.toLowerCase()可以参阅javascript toLowerCase()一章节。
（8）.innerHTML可以参阅innerHTML一章节。
javascript委托代码实例，这样的场景在实际项目中还是用的比较多的，关于javascript委托代码实例就介绍到这了。
javascript委托代码实例属于前端实例代码，有关更多实例代码大家可以查看。