1.事件委托 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！ 2.事件冒泡为在大量单独文档元素上注册处理程序提供了替代方案，即在共同祖先元素上注册一个处理程序来处理所有的事件。例如，
1.事件委托 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
2.事件冒泡为在大量单独文档元素上注册处理程序提供了替代方案，即在共同祖先元素上注册一个处理程序来处理所有的事件。例如，可以在<form>元素上注册“change”事件处理程序来取代在表单的每个元素上注册“change”事件处理程序。
3.文档元素上的大部分事件都会冒泡，focus，blur,scroll 不会冒泡。文档元素上的load事件会冒泡，但它会在Document对象上停止冒泡而不会传播到window对象。只有当整个文档都加载完毕时才会触发window 对象的load事件。
4.事件传播的三个阶段 捕获阶段 目标事件本身的事件处理程序调用 事件冒泡
5.IE9之前的IE浏览器不支持事件捕获。
以下为代码分享
一、事件注册
/* *在指定的事件目标上注册用于处理指定类型事件的指定处理程序函数 *确保处理程序一直作为事件目标的方法调用 */ function addEvent (target,type,handler){ if(target.addEventListener) target.addEventListener(type,handler,false); else target.attachEvent("on"+type,function(event){ //把处理程序作为事件目标的方法调用 //传递事件对象 return handler.call(target,event); }); }二 事件取消
function cancelHandler(event){ var event=event||window.event;//用于IE /*这里是处理事件的代码*/ if(event.preventDefault) event.preventDefault();//标准方法 if(event.returnValue) event.returnValue=false;//IE return false;//用于处理使用对象属性注册的处理程序 }以上为取消事件的默认操作，记忆方法 在支持addEventListener的浏览器中调用事件对象的preventDefault() 方法 。preventDefault翻译成中文译为防止默认。在IE中通过设置事件对象的returnValue属性为false。 return false;//用于处理使用对象属性注册的处理程序。
function cancelBubble(event){ var event=event||window.event;//IE if(event.stopPropagation) event.stopPropagation();//标准技术 if(event.cancelBubble) event.cancelBubble=true;//IE return false;//用于处理使用对象属性注册的处理程序 }以上为取消事件冒泡，记忆方法 在支持addEventListener的浏览器中调用事件对象的stopPropagation 方法 。stopPropagation翻译成中文译为停止传播。在IE中通过设置事件对象的cancelBubble属性为true。cancelBubble翻译成中文是取消泡沫。 return false;//用于处理使用对象属性注册的处理程序。
三、当文档准备就绪时调用的函数
/* *传递函数给whenReady(),当文档解析完毕且未操作准备就绪时， *函数将作为文档对象的方法调用 *DOMContentLoaded,readystatechange或load事件发生时会触发注册函数 *一旦文档准备就绪，所有函数都将被调用，任何传递给whenReady()的函数都将立即调用 */ var whenReady=(function(){//这个函数返回whenReady()函数 var funcs=[];//当获得事件时要运行的函数 var ready=false;//当触发事件处理程序时，切换到true //当文档准备就绪时，调用事件处理程序 function handler(e){ //如果已经运行过一次，只需要返回 if(ready) return; //如果发生readystatechange事件 //但其状态不是"complete"的话，那么文档尚未准备好 if(e.type==="readystatechange"&&document.readyState!=="complete") return; //运行所有注册函数 //注意每次都要计算funcs.length //以防止这些函数的调用可能会导致注册更多的函数 for(var i=0; i<funcs.length;i++) funcs[i].call(document); //现在设置ready标志为true,并移除所有函数 ready=true; funcs=null; } //为接收到任何事件注册处理程序 if(document.addEventListener){ document.addEventListener("DOMContentLoaded",handler,false); document.addEventListener("readystatechange",handler,false); window.addEventListener("load",handler,false); } else if(document.attachEvent){ document.attachEvent("onreadystatechange",handler); window.attachEvent("onload",handler); } //返回whenReady()函数 return function whenReady(f){ if(ready) f.call(document);//若准备完毕，只需要运行它 else funcs.push(f) // 否则加入队列等候 } }());whenReady()函数的好处是监听DOMContentLoaded和readystatechange事件。
