在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中事件传播的机制
那么哪些 情况下我们使用这种方式呢?
在一些动态元素上 我们使用这个方法 能很好的解决了我们绑定事件 的麻烦