javascript事件代理的简明理解


对于javascript事件代理的简明理解

关于事件代理,对于很多已经用过很多年的人来说,可能真的不知道原来自己
感觉是完全陌生的感念,今天有时间我自己也来写一下我自己对事件代理的理解。
用我自己总结的一句话来理解就是:当我们给多个子元素添加处理事件的时候(比如td,tr的click事件),我们可以让父元素(table)来代理需要对子元素操作的事件(click),达到多个子元素具有click事件的效果。这就是我对事件代理的理解。
事件代理的代码实现,套用网上看到的一个实例:`
**```
function getEventTarget(e) {
 e = e || window.event;
 return e.target || e.srcElement;
}
```
```
function editCell(e) {
 var target = getEventTarget(e);
 if(target.tagName.toLowerCase() === 'td') {
   // DO SOMETHING WITH THE CELL
 }
}

```**

我们可以之间看第二个function:e是什么我们自然知道,通过e.target(非IE)来获取对应的子元素目标DO SOMETHING WITH THE CELL,就是我们需要对目标元素做什么操作。
经常看到的事件代理就是,我们给表格每一个cell添加处理事件,为了避免表格过多,我们给表格的父元素添加代理事件,那么table帮我们给每个单元格赋了click事件。
其中也用到了js的事件冒泡,其实就是子元素到父元素,一层层找到根,详细的稍后补充。。
我是菜鸟,有错狂喷!

猜你喜欢

转载自blog.csdn.net/coder_daiwang/article/details/50858038