浅谈阻止事件冒泡的两种方法

  在此之前先随便记录几点浅显的知识。

  1、JS组成：ECMAScript（Web的解释性编程语言）；DOM（document object model文档对象模型）；BOM（browser object model浏览器对象模型）。

  2、事件监听方式：a、on+事件名称；b、addEventListener('事件类型',事件处理函数,是否捕获)/removeEventListener('事件类型',事件处理函数,是否捕获);

第二种方式ie6、7、8下不支持，可以用attachEvent('事件类型',事件处理函数)/detachEvent('事件类型',事件处理函数)代替。

  3、 捕获型事件和冒泡型事件是DOM支持的两种事件类型。

a、事件捕获是从document开始，一级级向下传递，在捕获过程中如果dom节点中有绑定捕获型事件处理函数，就会执行（有特殊说明的除外），直到到达触发事件的元素，捕获结束。

b、冒泡是从触发该事件的元素开始，一级级向上传递，直到document。

  OK了，了解了上述几点，其实阻止事件冒泡的方法就很好理解了：

  阻止事件冒泡的两种方式正好是对应两种监听方式。

第一种：on+事件名称/attachEvent()----ev.cancelBubble = true;或者return false;

oDiv.onclick = function(ev) {
ev.cancelBubble = true;
}第二种：addEventListener()----ev.stopPropagation();
function fn1(ev) {
ev.stopPropagation();
}