JS中事件处理机制

在js中事件的处理分三个阶段 目标阶段 捕获阶段 冒泡阶段（以下未申明均为标准浏览器下）

在DOM2级事件中

ele.addEventListener("click",fn1,true);//第三个参数：是否在捕获阶段处理这个事件 同一个方法先捕获再冒泡
    ele.addEventListener("click",fn1,false);

这样的写法 当点击的时候回执行两次fn1,而且执行的先后是 为true的那个fn1

但是在标准浏览器下，相同的方法 进行监听只会绑定一次 但是如果第三个参数的不同 表示在不懂的阶段出发了这个函数，但是 绑定 也只是绑定了一次，值为true的胃捕获阶段处理 false 为冒泡阶段触发

在IE（IE6 7 8）中的事件监听会有 很多的兼容性问题，晚点我会详细的在写个博客介绍

再说下 IE下的一些简单的兼容性问题

前面的是标准浏览器 后面的是IE

e=e||window.event;
e.target= e.srcElement;//事件源
e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY;
e.preventDefault=function(){e.returnValue=false};//阻止事件默认行为
e.stopPropagation=function(){e.cancelBubble=true};//阻止事件冒泡

什么是事件委托 我们如何运用事件委托

举个简单的例子

<div id="outer">
    我是outer
    <div id="middle">
        我是middle
        <div id="inner">
            我是inner
            <p id="p1">
                我是p1
                <span id="span1">
                    我是span
                </span>
            </p>
        </div>
    </div>
</div>

如果我要给span添加一个点击事件弹出其ID 那么如果我们不阻止事件的冒泡的话 就会弹出其所有的父级对应的ID，但是 我们可以吧这一点击事件委托给outer 然后再通过事件源判断是不是span 如果是则 弹出其ID 不是则跳过 这就是一个简单的事件委托的应用

事件委托我觉得用简单的话来说就是把所有的事件处理，都委托给一个顶级的元素去处理，它就是利用了JS中事件传播的机制

那么哪些 情况下我们使用这种方式呢？

在一些动态元素上 我们使用这个方法 能很好的解决了我们绑定事件 的麻烦