DOM事件和事件委托

请简述DOM事件模型或DOM事件机制？

 

<div  class='ye'>

    <div  class='ba'>

       <div  class='er'>文字</div>

    </div>

</div>

给三个div添加事件监听，由上到下分别为：fnYe/fnBa/fnEr

点击子元素也同样点击了父元素，相反也是如此

 

在调用顺序上：先捕获在冒泡

W3C兼顾了微软IE和网景，先（捕获） ye>ba>er 看有没有函数监听，然后在（冒泡） er>ba>ye 顺序看有没有函数监听。

从外向内找监听函数，叫事件捕获

从内到外找监听函数，叫事件冒泡

 

addEventListener：事件绑定API

W3C： baba.addEventListener('click',fn,bool); 

            如果bool(布尔)不传值默认为falsy，则fn使用事件冒泡。

            相反，bool 为 true,则fn使用事件捕获。

 

target 与 currentTarget 区别？

e.target 表示用户操作元素

e.currentTarget 表示程序员监听的元素

 

取消冒泡？

捕获不能取消，但冒泡可以通过e.stopPropagation 中断冒泡

 

---

请简述事件委托？

 

js里的事件委托：当事件触发时，把想要做的事情委托给父元素处理。

一：当我们要为这多个button按钮添加点击事件时,可以遍历

 

这样子做可以实现，但是十分浪费监听数，有25个button就有25个一模一样的函数创建了，十分浪费内存。

最好的解决办法就是利用dom的事件模型何不把这件事情给他们的父亲呢，代码如下:

 

 

二：如果要监听目前不存在的元素的点击事件。

 

 

事件委托的优点有两点

1. 可以省内存
2. 可以监听动态元素