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委托代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容