事件捕获 常见的事件句柄类型看文章javascript（二） 事件句柄。 DOM Level 0 事件模型一些比较常用的事件进行介绍： 当图片或文档加载失败的时
事件捕获
常见的事件句柄类型看文章javascript（二） 事件句柄。
DOM Level 0 事件模型 一些比较常用的事件进行介绍：
当图片或文档加载失败的时候可以使用error事件.
很久以前的写法//html中定义 内嵌就是捕获<img src="./img/123.jpg" onerror="f2()" />//js文件function f2(){ alert("buhao");}当图片路径不存在的时候就跳出警告框。其他事件句柄最简单的用法基本都是这样的
事件冒泡处理
这个问题其实是一个很经典的问题，在使用<div>标签布局时，对外层事件和内层事件都绑定相同事件句柄时，会有一个事件冒泡的过程。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/event.js"> </script> </head> <body> <div id="first" style="paddig: 20px; background-color:#ff0; width: 150px;" > <div id="second" style="background-color: #f00; width: 100px; height: 100px; border: 1px dashed #000;"> </div> </div> </body></html>window.onload=setEvents;function setEvents(){ document.getElementById("first").onmousedown=function(){ alert("first"); } document.getElementById("second").onmousedown=function(){ alert("second"); } document.oncontextmenu=function(){ alert("document"+this); }}这个时候你点击最里层的second，这个时候你会发现，会提示出三个警告框。其实很多时候我们并不会想要出现这样的情况，这个时候就必须借助event的stopPropagation属性
window.onload=setEvents;function setEvents(){ document.getElementById("first").onmousedown=function(){ alert("first"); stopEvent(window.event); } document.getElementById("second").onmousedown=function(){ alert("second"); stopEvent(window.event); } document.oncontextmenu=function(){ alert("document"+this); return false; }}function stopEvent(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; }}有些时候对窗口事件例如是点击鼠标右键该event.stopPropagation会失效，这个时候就需要return false出场。代码中已经有体现。
DOM Level 2 事件模型
主要就是三个关键方法：addEventListener，removeEventListener()，dispatchEvent()
addEventListener（‘event’，eventFunction,boolean）三个参数。
当boolean 为false时是冒泡阶段，当为true 时为捕获阶段。
function cascadeDown(event){ alert("capturing "+this);}function bubbleUp(event){ alert("bubbing "+this);}window.onload=setup;function setup(event){ //扑捉阶段 document.addEventListener('click',cascadeDown,true); document.forms[0].addEventListener('click',cascadeDown,true); document.forms[0].elements[0].addEventListener('click',cascadeDown,true); //冒泡阶段 document.addEventListener('click',bubbleUp,false); document.forms[0].addEventListener('click',cascadeDown,false); document.forms[0].elements[0].addEventListener('click',cascadeDown,false); }当需要阻止冒泡阶段时:
function bubbleUp(event){ alert("bubbing "+this); event.stopPropagation();}removeEventListener()，第一参数指定事件类型，第二个参数指定函数实例，第三个参数指定移除阶段如捕获/冒泡阶段。
dispatchEvent这边资料比较少：
专门的博客讲的比较好：http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
http://biancheng.dnbcw.info/javascript/223788.html
