本来打算介绍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