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;
　　}
}

js事件委托

标签：

原文地址：http://www.cnblogs.com/leungUwah/p/5031536.html