js学习笔记-事件代理

Posted 2020-06-24 enmeen

通过事件委托，你可以把事件处理器绑定到父元素上，避免了把事件处理器添加到多个子级元素上。从而优化性能。

事件代理用到了事件冒泡和目标元素。而任何一个元素的目标元素都是一开始的那个元素。

这里首先要注意event的target与currentTarget的区别。

target：表示触发事件的元素。currentTarget：表示事件绑定的元素。

只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。

例如

1 <div id="contain">
2         <ul>
3             <li class="zero">zero</li>
4             <li class="one">one</li>
5             <li class="two">two</li>
6             <li class="three">three</li>
7             <li class="four">four</li>
8         </ul>
9     </div>

将事件绑定在#contain。如果点击类名为three的li。则会的到如图所示的target值。

其中editCell(e)函数是简单的判断函数。getEventTarget()函数是返回目标元素e.target。应为在各个浏览器下获取目标元素的方法有差异。

function editCell(e) {
        var target = getEventTarget(e);
        if (target.tagName.toLowerCase() == \'li\') {
            var targetContent = target.innerhtml;
            alert(targetContent);
        }
    }

更加详细的请看http://www.cnblogs.com/silence516/archive/2009/09/03/delegateEvent.html本文的代码也是从这里学习到的

注意事项

要注意不是所有的事件都能冒泡。