浏览器事件传播

浏览器事件传播分三个阶段：

• 第一阶段为捕获阶段：事件从Document对象的根节点沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件的函数，那么就会在事件传播过程中运行这些函数。
• 第二阶段发生在目标节点自身：直接注册在目标上的事件处理函数被运行。
• 第三阶段为起泡阶段：事件将从目标元素向上回传给Document对象的根节点,起泡过程中也会触发先辈相应的事件处理函数。

如果想要阻止事件传播，可以用Event对象的stopPropagation方法实现:

$("#input_obj").click(function(e){

e.stopPropagation();

});

这样input_obj的先辈的click事件就不会触发了

事件传播的三个阶段完成之后可能会触发浏览器的默认动作(例如a标签的点击事件完成后浏览器会默认跳转到指定链接)，如不想让浏览器执行默认动作，可以用Event对象的preventDefault方法实现:

$("#a_obj").click(function(e){

e.preventDefault();

});

这样点击a标签后就不会进行跳转了

上面两段代码都采用了jquery的特性，如果用原生方法实现如下：

document.getElementById('input_obj').onclick = function(e) { 

e = e || window.event;

e.stopPropagation?e.stopPropagation():e.cancelBubble = true;

}

document.getElementById('a_obj').onclick = function(e) { 

e = e || window.event;

e.preventDefault?e.preventDefault():e.returnValue = false;

}