javascript的事件

和上都定义了点击事件，则s2s2s2s2

元素并使用事件捕获时，点击事件将按照document—>—>—>clicks2:s1incapturemodes2DOMeventflowincapturemode下W3C组织统一，JS支持冒泡流和捕获流，但是目前低版本的IE浏览器只能支持冒泡流（IE6、7、8）；js事件流示意图如下：DOM2级事件流分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。事件捕获阶段：实际目标（使用chrome浏览器测试，弹出内容：s1捕获模式，s2捕获模式，s2冒泡模式，s1冒泡模式，这里可以看到Out:1.DOMLevel2可以注册多个元素上的事件。2.DOMLevel2支持事件捕获和事件冒泡，但是捕获事件在冒泡事件之前触发。以上是用chrome测试的，现在我们用IE8测试，点击，没有弹出层，IE8以下浏览器不支持addEventListener函数，eventdelegation（或eventdelegation）事件委托是一个典型的冒泡事件流Application，什么是事件委托？即利用冒泡的原理，给parent添加事件，触发执行效果。前面的代码，方法一：111222333444很简单的代码，现在分析下DOM是如何执行的，先找到ul，然后遍历li，当你点击li的时候，找到目标li的位置，执行点击事件，这样每次点击，都需要找到li哦，那我们怎么用事件委托来处理呢？方法二：(function(){varwrapper=document.getElementById("wrapper");wrapper.onclick=function(e){vare=e||window.event;vartarget=e.target||e.srcElement;if(target.nodeName.toLocaleLowerCase()==='li'){alert(target.getAttribute('url'));}}})();使用父ul进行事件处理。当li被点击时，由于冒泡原理，事件会冒泡到ul。因为ul上有点击事件，所以会触发该事件。当然，这里，当ul被点击的时候，它也会被触发，所以我们在上面加了一个判断。事件对象提供了一个属性target，可以返回事件的目标节点。也就是说，目标可以表示为当前事件操作DOM，但它并不是真正的DOM操作。点击li会触发一个事件，每次只会进行一次dom操作。li数量多的话，dom的操作会大大减少，优化后的性能可想而知！总结1：使用事件委托可以提高性能。在项目中，我们的DOM有时是动态生成的，我们现在使用方法一，(function(){varwrapper=document.getElementById("wrapper");varlists=wrapper.getElementsByTagName('li');for(vari=0;i事件对象重要属性和方法事件对象包含与创建它的特定事件和方法相关的属性。触发的事件类型不同，可用的属性和方法也不同。但是，所有的事件都会包含下表中列出的成员：type：事件的类型，比如onlick中的click；IE属性->srcElement，标准属性->target：触发事件的元素更多事件属性和方法：http://www.w3school.com.cn/js...事件处理程序HTML事件处理程序click

DOM0级事件处理器获取对这个元素DOM对象的引用，通过DOMgetElementById()等方式获取这个元素对象的引用.,然后每个事件在这个对象上使用对应的属性，比如click事件，那么这个对象就有一个onclick属性与之对应，那么你就在这个对象的属性上绑定事件处理器。显示内容：第二次点击事件！DOM0中的每个事件元素目标对于每种事件类型最多只能注册一个事件处理程序，如果注册了多个事件处理程序则覆盖之前的一个，之前注册的程序将不会被执行。删除此事件处理程序：s1.onclick=null；DOM2级事件处理程序DOM2级事件定义了两个方法，addEventListener()方法和removeEventListener()方法来处理和删除事件处理程序。它们可以接收三个参数，第一个参数：要处理的事件的名称，是一个字符串，但切记不要加“on”作为前缀，第二个参数：用作事件处理的函数，第三个参数：一个布尔值。当布尔值为真时，事件处理程序在事件捕获阶段被调用。如果为false，则在冒泡阶段调用事件处理程序。主要优点是多个事件处理器可以绑定到同一个事件同一个对象。并且注册的多个事件顺序执行；通过addEventListener添加的事件处理程序必须通过removeEventListener移除，并且参数保持一致。然后我们根据上面的代码添加移除事件：s1.removeEventListener('click',function(){console.log('取消点击事件');},false);再次点击或显示：第一次点击事件！第二次点击事件！点击事件没有去掉，显示'取消点击事件'，这是怎么回事？？？因为：通过addEventListener添加的匿名函数将无法删除修改后的代码：functionfirstClick(){console.log('第一次点击事件！');}functionsecClick(){console.log('第二次点击事件!')}s1.addEventListener('点击',firstClick,false);s1.addEventListener('点击',secClick,false);s1.removeEventListener('点击',secClick,false);输出：第一个点击事件！但是这两个方法不支持除IE8及以下的所有浏览器，那么IE的事件处理函数怎么写呢？？？IE事件处理程序IE8及以下浏览器实现了类似的添加和删除方法：attachEvent()和detachEvent()。这两种方法都需要两个参数：事件处理程序名称和事件处理程序函数。注意这里是事件处理的名称，所以需要加上'on'，因为IE8及以下版本的浏览器只支持事件冒泡，所以通过attachEvent()添加的事件处理器都是冒泡事件。s1.attachEvent("onclick",function(){alert("第一次点击事件！");});s1.attachEvent("onclick",function(){alert("第二次点击事件！");});IE8及以下弹出的是：第二次点击事件！第一次点击事件！detachEvent删除事件与removeEventListener删除事件相同，添加的匿名函数无法删除。跨浏览器事件处理器vareventUtil={addEvent:function(el,type,handler){if(el.addEventListener){el.addEventListener(type,handler,false);}elseif(el.attachEvent){el.attachEvent('on'+type,handler)}else{element['on'+type]=handler;}},removeEvent:function(el,type,handler){if(el.removeEventListener){el.removeEventListener(type,handler,false)}elseif(el.detachEvent){el.detach('on'+type,handler)}else{el['on'+type]=null;}}}参考文档：http://www.jb51.net/article/7...http://blog.csdn.net/jsdcheny...http://www.cnblogs.com/todayh...