Skip to main content

JavaScript事件冒泡与捕获

一、JavaScript中的事件传播模式​

在JavaScript中存在两种不同的事件传播模式，这得益于网景公司与微软公司的浏览器大战，其中网景公司主推捕获模式，而微软公司主推冒泡模式。所以在IE9及其以下的浏览器中，IE只支持冒泡模式，不过IE9+以及现在的主流浏览器都支持两种模式了。

虽然是两种不同的模式，但是他们的作用都是相同的：决定HTML诸多元素中接收事件的顺序，从而按顺序触发不同元素上的事件监听函数。

1. 捕获模式​

当事件发生时，该事件从最外层元素接收到，然后依次向内层元素传播。

2. 冒泡模式​

当事件发生时，该事件最先由内层元素接收到，然后依次向外层元素传播。

3. 使用方式​

DOM.addEventListener(type, handler, useCaptue);

其中，当useCapture为true时，表明此时注册的是一个捕获模式的事件，为false时，表明此时注册的是一个冒泡模式的事件。

二、JavaScript中阻止冒泡&取消默认事件​

JavaScript中捕获和冒泡是两种行为，但是使用e.stopPropagation()都可以起到阻止捕获和冒泡阶段中当前事件的进一步传播。而event.preventDefault()是用来取消默认事件的，比如取消a标签的跳转事件。

还需要注意的一点是：实现w3c标准的浏览器中的event要用参数才能拿到，是运行时的临时变量，而IE浏览器里的event是全局变量，挂载在window上。

1. 阻止冒泡和捕获​

w3c的方法是e.stopPropagation()，而IE则是使用e.cancelBubble = true。

function handleClick(e) {
  // code...
  e.stopPropagation();
  window.event.cancelBubble = true;
}

2. 取消默认事件​

w3c的方法是e.preventDefault()，而IE则是使用e.returnValue = false;

function handleClick(e) {
  // code...
  e.preventDefault();
  window.event.returnValue = false;
}

三、jQuery中的阻止方法​

  • JavaScript的return false只会阻止默认行为，
var dom = document.getElementById('click');
dom.onclick = function () {
  return false;
};
  • 引入jQuery的话既阻止默认行为又防止对象冒泡。
$('#click').on('click', function () {
  return false;
});