js事件委托

在给多个标签定义一个事件的时候我们不会给每个DOM都添加一个事件浪费很多的资源，为此可以使用js的事件委托。

在图灵社区上给事件委托是这样定义的：事件委托就是事件目标自身不处理事件，把事件委托给父元素或者祖先元素，甚至根元素。

这里注明文章出处：http://www.ituring.com.cn/article/467

自己写了一个demo：

给ul下的每个li添加一个click事件

  HTML代码：

<ul id="evtli">    <li><a href="#"></a>liEvetn1</li>   //当是这种情况li里面嵌套a标签的时候由于a标签中没有内容，所以evt.target得到的还是li，控制台输出的还是liEvent1　　<li><a href="#">liEvent1a</a></li>  //当li中嵌套a标签的时候因为a标签中有内容，加上目前我们的监听事件addEventListener采用的是冒泡模式，事件是由内到外的，所以evt.targe　　　　　　　　　　　　　　　　　　　　　　　　t得到的是a标签，控制台输出的是liEvent1a    <li>liEvent2</li>    <li>liEvent3</li></ul>js代码：<script type="text/javascript">

   function addDivEvent(evt) {        var tagname = evt.target;       console.log($(tagname).text());   }   var divtag = document.getElementById('divid');   divtag.addEventListener('click', addDivEvent, false); </script>同时图灵社区也提醒了我们，由于我们采用的是冒泡模式，如果停止了冒泡模式就阻止了事件传播，那我们的事件委托就失效了。同时介绍停止冒泡模式的方法：function StopPpg(evt) {　　if(evt && evt.stopPropagation) { // 非IE下　　　　evt.stopPropagation;　　} else { // IE 下　　　　window.event.cancelBubble = true;　　}}