JavaScript DOM0，DOM1，DOM2级事件 与 event 对象

转自 https://www.cnblogs.com/holyson/p/3914406.html
转自 https://www.jianshu.com/p/ec25f838cc3d

0级 DOM

0 级 DOM 有两类

1. 在标签内写onclick事件

3. 在JS写 onlicke = function（）{} 函数

document.getElementById("myButton").onclick = function () {
    alert('thanks');
}

1级 DOM（没有定义事件相关的内容）

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

2级 DOM

2级 DOM 中除了定义了一些 DOM 相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型。它定义了两个方法用来添加和移除事件方法：addEventListener(event, function, useCapture) 和 removeEventListener(event, function, useCapture)。

它们都有三个参数：

1. 事件名（如click）
2. 事件处理程序函数
3. true则表示在捕获阶段调用；false表示在冒泡阶段调用。

• addEventListener(): 可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
• removeEventListener():不能移除匿名添加的函数。

document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

事件流的三种模型

1. 事件冒泡（常用）

IE中采用的事件流是事件冒泡，先从具体的接收元素，然后逐步向上传播到不具体的元素。

2. 事件捕获（少用）

Netscapte采用事件捕获，先由不具体的元素接收事件，最具体的节点最后才接收到事件。

3. DOM事件流

DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

即先捕获（从外层到内层），后冒泡（从内层到外层）

HTML常见事件

事件	触发条件
load	当页面完全加载后在window上触发，当图像加载完成后在img元素上触发，或当嵌入内容加载完成时，在object元素上触发
unload	页面完全卸载后在window上触发，或嵌入内容卸载后在object元素触发
select	用户选择文本框中的字符时触发
change	文本框焦点变化后其值改变时触发
submit	用户提交表单的时候触发
resize	窗口或框架大小变化的时候在window上触发
scroll	用户滚动带滚动条的元素时，在该元素上触发
focus	页面或元素获得焦点时在window及相应元素上触发
blur	页面或元素失去焦点时在window及相应元素上触发
beforeunload	页面卸载前在window上触发
mousewheel	不算HTML的，当用户通过鼠标滚轮与页面交互，在垂直方向滚动页面时触发

HTML 常用函数及属性

• preventDefault
  阻止默认行为。常用在点击链接时执行自定义方法而不跳转；或点击表单的提交按钮时不采用默认方式提交，转而执行自定义的事件。
• stopPropagation
  停止事件传递
• stopImmediatePropagation
  阻止事件冒泡并且阻止相同事件的后面定义的其他侦听器被调用
• currentTarget
  当前绑定事件的元素
• target
  触发事件的元素（最具体的元素）

paragraph