前端随心记---------Javascript系列（第十三节.DOM事件的三个阶段）

DOM事件的三个阶段

当一个DOM事件被触发时,不仅仅只是单纯的在本身对象触发一次,而且会经历三个不同的阶段;

1.捕获阶段: 先由文档的根节点document往事件触发对象,从外向内捕获事件对象,

2.目标阶段:到达目标事件位子,触发事件.

3.冒泡阶段:再从目标事件位子往文档的根节点方向回溯,从内向外冒泡事件对象.

事件委托
事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。

事件代理的原理是DOM元素的事件冒泡。

委托事件的好处:

把某个事件加在父元素上,提高程序的执行效率动态创建的元素,可以在创建元素的函数体外部为其添加事件减少内存空间占用.
委托的机制: 利用事件冒泡 (不是所有的事件都能实现委托.)

获取事件源:
e.target || e.srcElement 高版本与兼容ie (由于在ie上为undefined所以需要兼容)

实现事件委托:

方式一::
        事件源.on+事件=function( ){
            var e= e  ||  event;
            var target=e.target  || e.srcElement;
            if(target.nodeName.tolowerCase( )=="元素名"){ }
            }
            
 方式二::
        事件源.addEventListener("事件",function( e ){
            var e=e || event;
            var target=e.target  || e.srcElement;
            if(target.nodeName.tolowerCase( )=="元素名"){ }
            });