DOM0 & DOM1 & DOM2 & DOM3 & DOM4 All In One

DOM0 & DOM1 & DOM2 & DOM3 & DOM4 All In One

events order bug

  const log = console.log;
  const btn = document.querySelector('#btn');
  // once
  btn.onpopstate = function(e) {
    console.log(`❓ event function 1`, e);
  };
  btn.onpopstate = function(e) {
    console.log(`❓❓ event function 2`, e);
  };
  // multi times
  btn.addEventListener('click', (e) => {
    log(`✅ event 1`, e);
  });
  btn.addEventListener('click', (e) => {
    log(`✅✅ event 2`, e);
  });

  const log = console.log;
  const btn = document.querySelector('#btn');
  // multi times
  btn.addEventListener('click', (e) => {
    log(`✅ event 1`, e);
  });
  btn.addEventListener('click', (e) => {
    log(`✅✅ event 2`, e);
  });
  // once
  btn.onpopstate = function(e) {
    console.log(`❓ event function 1`, e);
  };
  btn.onpopstate = function(e) {
    console.log(`❓❓ event function 2`, e);
  };

DOM0 & DOM1 & DOM2 & DOM3 & DOM4

理解 DOM0, DOM1, DOM2, DOM3

文档对象模型是一种与编程语言及平台无关的API(Application programming Interface)，借助于它，程序能够动态地访问和修改文档内容、结构或显示样式。
W3C协会早在1988年就开始了DOM标准的制定，W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本。

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级别则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。
为此DOM2和DOM3级分为许多模块（模块之间具有某种关联），分别描述了DOM的某个非常具体的子集。
这些模块如下：
DOM2级核心（DOM Level 2 Core）：在1级核心的基础上构建，为节点添加了更多方法和属性；
DOM2级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不同视图；
DOM2级事件（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS样式信息；
DOM2级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM文档和选择其特定部分的新接口。 
DOM2级HTML（DOM Level 2 HTML）：在1级HTML基础上构建，添加了更多属性、方法和新接口。

DOM3级又增加了XPath模块和加载与保存（Load and Save）模块。
DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。

DOM0就是直接通过 onclick写在html里面的事件;
DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;
DOM3是一些新的事件。

DOM4 ???

https://dom.spec.whatwg.org/

https://www.w3.org/TR/dom

http://html5-overview.net/spec/dom.html
http://html5-overview.net/spec/intersection-observer.html

refs

W3C

https://www.w3.org/TR/DOM-Level-2-Core/

https://www.w3.org/TR/2011/WD-dom-20110915/
https://www.w3.org/TR/2015/WD-dom-20150428/

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---