本来打算介绍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
网友评论