初识js事件委托(1)

本来打算介绍clipboard.js如何使用,却发现在https://clipboardjs.com介绍中事件委托竟然不知道,于是就有了这篇介绍。

1 事件委托的原理

事件委托是是利用事件的冒泡原理来实现的,从内层元素一层一层往外找,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

2针对dom中已经有的元素举例

1未使用事件委托

实现功能是点击li,打印11111:

<body>
  <ul id="uli">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
  </ul>
</body>

在我认识事件委托之前,代码都是这样写的,首先要找到ul,然后遍历li,然后点击li的时候,又要找一次目标的li的位置,才能执行最后的操作,每次点击都要找一次li;
<pre>
<script>
window.onload = function () {
var oUl = document.getElementById('uli');
var aLi = oUl.getElementsByTagName('li')
for(i=0;i<aLi.length;i++){
aLi[i].onclick = function () {
console.log('11111');
}
}
}
</script>
</pre>

2使用事件委托

这里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发。大大减少了dom的操作
<pre>
<script>
window.onload = function () {
var oUl = document.getElementById('uli');
oUl.onclick = function () {
console.log('11111');
}
}
</script>
</pre>
参考http://www.cnblogs.com/liugang-vip/p/5616484.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容