JavaScript事件冒泡与捕获

, ,

JavaScript事件冒泡与捕获

1. JavaScript中的事件传播模式

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

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

1.1 捕获模式

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

1.2 冒泡模式

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

1.3 使用方式

1
DOM.addEventListener(type, handler, useCaptue);

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

2. JavaScript中阻止冒泡&取消默认事件

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

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

2.1 阻止冒泡和捕获

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

1
2
3
4
5
function handleClick(e) {
  // code...
  e.stopPropagation();
  window.event.cancelBubble = true;
}

2.2 取消默认事件

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

1
2
3
4
5
function handleClick(e) {
  // code...
  e.preventDefault();
  window.event.returnValue = false;
}

3. jQuery中的阻止方法

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