JavaScript捕捉和冒泡讨论

2024年5月12日 135次阅读 来源: 前端开发博客

上个星期在微博中一个关于javascript捕捉和冒泡代码的议论，能够没有着手完成一篇的人没法给出肯定的答案。

这里再来回忆一下之前的三条微博。

事宜的实行递次

JavaScript冒泡和捕捉考核题目看图回复题目，晚上宣布答案。

问：点击Li，JS的实行递次是什么？

JavaScript捕捉和冒泡讨论

总结就是：先捕捉，后冒泡，捕捉从上到下，冒泡从下到上（抽象点说法：捕捉像石头沉入海底，冒泡则像气泡冒出水面）

问：假如去掉解释 event.stopPropagation(); 效果又会输出什么？

答：去掉event.stopPropagation()
以后，由于事宜有捕捉和冒泡时先实行捕捉，捕捉到div以后，事宜被阻挠，背面就不在继承流传了。所以只输出divcallback.

在上面的代码假如增添一个div.addEventListener(‘click’,callbackdiv2,false);

则div先实行捕捉，接着实行上面这句冒泡，所以微博里的一个朋侪批评说事宜实行过捕捉就不会实行冒泡实际上是不对的。

div.addEventListener(‘click’,callbackdiv,true);这一句只能是捕捉才实行。

以上代码代码：演示

事宜差别浏览器处置惩罚函数

element.addEventListener(type, listener[, useCapture]); // IE6~8不支持（捕捉和冒泡经由过程useCapture,默许false）
element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持(只实行冒泡事宜)
element[’on’ + type] = function(){} // 一切浏览器（默许实行冒泡事宜）

JavaScript捕捉和冒泡讨论

W3C范例中定义了3个事宜阶段，顺次是捕捉阶段、目的阶段、冒泡阶段。事宜对象根据上图的流传途径顺次完成这些阶段。假如某个阶段不支持或事宜对象的流传被住手，那末该阶段就会被跳过。举个例子，假如Event.bubbles属性被设置为false，那末冒泡阶段就会被跳过。假如Event.stopPropagation()在事宜派发前被挪用，那末一切的阶段都会被跳过。

捕捉 阶段：

在事宜对象抵达事宜目的之前，事宜对象必需从window经由目的的先人节点流传到事宜目的。 这个阶段被我们称之为捕捉阶段。在这个阶段注册的事宜监听器在事宜抵达其目的前必需先处置惩罚事宜。

目的 阶段：

事宜对象抵达其事宜目的。 这个阶段被我们称为目的阶段。一旦事宜对象抵达事宜目的，该阶段的事宜监听器就要对它举行处置惩罚。假如一个事宜对象范例被标志为不能冒泡。那末对应的事宜对象在抵达此阶段时就会住手流传。

冒泡 阶段：

事宜对象以一个与捕捉阶段相反的方向从事宜目的流传经由其先人节点流传到window。这个阶段被称之为冒泡阶段。在此阶段注册的事宜监听器会对响应的冒泡事宜举行处置惩罚。

在一个事宜完成了一切阶段的流传途径后，它的Event.currentTarget会被设置为null而且Event.eventPhase会被设为0。Event的一切其他属性都不会转变（包含指向事宜目的的Event.target属性）.

跨浏览器的事宜处置惩罚函数：

var EventUtil = {
  addHandler: function(element, type, handler) {
    if (element.addEventListener) {  // DOM2
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {  // IE
      element.attachEvent('on' + type, handler);
    } else {  // DOM0
      element['on' + type] = handler;
    }
  },

  removeHandler: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent('on' + type, handler);
    } else {
      element['on' + type] = null;
    }
  }
};

跨浏览器的事宜对象：

var EventUtil = {
  getEvent: function(e) {
    return e ? e : window.e;
  },

  getTarget: function(e) {
    return e.target || e.srcElement;
  },

  preventDefault: function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  },

  stopPropagation: function(e) {
    if (e.stopPropagation) {
      e.stopPropagation()
    } else {
      e.cancelBubble = true;
    }
  }
}

能够看我之前写过的一篇文章：怎样住手冒泡和阻挠默许行动

ps:半个月没发文章，由于我最近在搞这个：开辟头条网，然后我发明这个东西做好和做坏基础没有前途，我斟酌要不要下掉，呜呜……，请赐赉我动力吧。

    原文作者：前端开发博客
    原文地址: https://segmentfault.com/a/1190000004976936
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞