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

你的名字 2022-04-05 03:40 227阅读 0赞

转自 [https://www.cnblogs.com/holyson/p/3914406.html][https_www.cnblogs.com_holyson_p_3914406.html]  
转自 [https://www.jianshu.com/p/ec25f838cc3d][https_www.jianshu.com_p_ec25f838cc3d]

# 0级 DOM #

0 级 DOM 有两类

1.  在标签内写onclick事件

1.  在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中采用的事件流是事件冒泡，先从具体的接收元素，然后逐步向上传播到不具体的元素。

![在这里插入图片描述][141533251392071.png]

## 2. 事件捕获（少用） ##

Netscapte采用事件捕获，先由不具体的元素接收事件，最具体的节点最后才接收到事件。  
![在这里插入图片描述][141533263118528.png]

## 3. DOM事件流 ##

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

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

![在这里插入图片描述][141533286861687.png]

# HTML常见事件 #

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

# HTML 常用函数及属性 #

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

<!DOCTYPE html>
    <meta charset="utf8">
    <html>
    <body>
    <div>
    <p>paragraph</p>
    </div>
    <script>
    const p = document.querySelector('p')
    p.addEventListener("click", (event) => {
    	alert("我是p元素上被绑定的第一个监听函数");
    }, false);
    
    p.addEventListener("click", (event) => {
    	alert("我是p元素上被绑定的第二个监听函数");
    	//event.stopPropagation();
    	event.stopImmediatePropagation();
    	//执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
    }, false);
    
    p.addEventListener("click",(event) => {
    	alert("我是p元素上被绑定的第三个监听函数");
    	//该监听函数排在上个函数后面，该函数不会被执行
    }, false);
    
    document.querySelector("div").addEventListener("click", (event) => {
    	alert("我是div元素,我是p元素的上层元素, target=" + event.target.tagName + ", currentTarget=" + event.currentTarget.tagName);
    	//p元素的click事件没有向上冒泡，该函数不会被执行
    }, false);
    </script>
    </body>
    </html>

[https_www.cnblogs.com_holyson_p_3914406.html]: https://www.cnblogs.com/holyson/p/3914406.html
[https_www.jianshu.com_p_ec25f838cc3d]: https://www.jianshu.com/p/ec25f838cc3d
[141533251392071.png]: /images/20220405/8d02268169cb40d9bc9a376cec36d7b7.png
[141533263118528.png]: /images/20220405/3a7ccc2028ac4c13b0f01364b82e1617.png
[141533286861687.png]: /images/20220405/c94f49bb76e54e608f7ff6813c0cdad4.png