JavaScript三种事件绑定的方式(DOM的0级、2级、3级事件处理程序)

系统管理员 2023-07-12 09:22 66阅读 0赞

### JS事件绑定的方式： ###

**①、行内绑定  
②、动态绑定  
③、事件监听**

### 一、行内绑定【DOM0级事件处理程序】： ###

例：`<标签 属性列表 事件=”事件的处理程序” />`  
虽然可以完成需要的功能 但其把结构+样式+行为都绑定在同一个标签中 不利于后期维护

### 二、动态绑定【DOM0级事件处理程序】： ###

例：`dom对象.事件 = 事件的处理程序(通常是一个匿名函数)`  
将一个函数赋值给一个事件处理程序属性 **简单 且具有跨浏览器的优势**

**行内绑定与动态绑定的区别：**  
行内绑定中 其事件处理中的**this**指向了**全局window对象**  
动态绑定中 其事件处理中的**this**指向了**当前正在操作的dom对象**

### 三、事件监听【DOM2级事件处理程序】： ###

和DOM0级事件处理程序的优势：**可以添加多个事件处理程序**  
且DOM0级事件会被覆盖 DOM2级事件不会被覆盖  
`addEventListener()`：添加事件 `removeEventListener()`：删除事件

接收三个参数：  
1、要处理的事件名  
2、作为事件处理程序的函数  
3、一个布尔值(**true**为在捕获阶段调用事件处理程序 **false**为在冒泡阶段调用事件处理程序)

**IE**不支持addEventListener和removeEventListener方法 提供了两个类似的方法：

attachEvent()：添加事件
    detachEvent()：删除事件

接收两个参数：  
1、要处理的事件名  
2、作为事件处理程序的函数

## attachEvent()和addEventListener()的区别： ##

这两个方法都是用来绑定脚本事件 取代obj.οnclick=method

**1、attachEvent是IE有的方法 不遵循W3C标准**  
而其他的主流浏览器例如FF等遵循W3C标准的浏览器都使用addEventListener 因此 实际开发中需分开处理

**2、多次绑定后执行的顺序是不一样的**  
attachEvent是**后绑定先执行**  
addEventListener是**先绑定先执行**

**3、绑定事件时attachEvent必须带on 如onclick onmouseover等**  
而addEventListener不能带on 如click mouseover等

**4、attachEvent仅需传递两个参数**  
而addEventListener需要传递三个参数  
Element.addEventListener(事件类型, 触发后调用的函数, 事件是冒泡还是捕获(可选))  
false ：(默认)事件句柄在冒泡阶段执行  
true ：事件句柄在捕获阶段执行

--------------------

### DOM3级事件处理程序 ###

DOM3级事件在DOM2级事件的基础上**添加了更多的事件类型** 全部类型如下：

**UI事件**：当用户与页面上的元素交互时触发 例如：load 和 scroll

**焦点事件**：当元素获得或失去焦点时触发 例如：blur 和 focus

**鼠标事件**：当用户通过鼠标在页面执行操作时触发 例如：dbclick 和 mouseup

**滚轮事件**：当使用鼠标滚轮或类似设备时触发 例如：mousewheel

**文本事件**：当在文档中输入文本时触发 例如：textInput

**键盘事件**：当用户通过键盘在页面上执行操作时触发 例如：keydown 和 keypress

**合成事件**：当为IME（输入法编辑器）输入字符时触发 例如：compositionstart

**变动事件**：当底层DOM结构发生变化时触发 例如：DOMsubtreeModified

--------------------

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript【CSS操作、事件处理程序、DOM0级事件处理、DOM2级事件处理、事件类型之鼠标事件、事件流、Event事件对象、事件类型之键盘、事件事件类型之表单】(十三)

![f400ecabdd3a4604b4c49203c13cf7db.gif][] ![83970eb242954fc889a10bf6a0d287c2.png][]

冷不防/ 2023年10月14日 15:49/ 0 赞/ 124 阅读

相关 JavaScript三种事件绑定的方式(DOM的0级、2级、3级事件处理程序)

JS事件绑定的方式： ①、行内绑定 ②、动态绑定 ③、事件监听一、行内绑定【DOM0级事件处理程序】：例：`<标签属性列表事件=”事件的处理程序”

系统管理员/ 2023年07月12日 09:22/ 0 赞/ 67 阅读

相关关于DOM事件流、DOM0级事件与DOM2级事件

一、DOM 事件模型 DOM 事件模型包括捕获和冒泡，捕获是从上往下到达目标元素，冒泡是从当前元素，也就是目标元素往上到 window ![1731684-201908

深碍√TFBOYSˉ_/ 2023年06月02日 09:18/ 0 赞/ 184 阅读

相关 DOM 0级事件和DOM2级事件的认识

简单点说0级DOM 主要分为2个：一是在标签内写onclick事件　　　　二是在JS写onlicke=function（）\{\}函数 1） <i

小灰灰/ 2022年07月15日 15:54/ 0 赞/ 318 阅读

相关 js中dom0级事件和dom2级事件使用

1.dom0级事件在介绍dom0级事件之前，先简单介绍一下html事件，类似与一下代码的事件都叫做html事件： <div οnclick="fun([实参]

谁践踏了优雅/ 2022年06月16日 02:16/ 0 赞/ 358 阅读

相关 Javascript dom0级和dom2级事件之间的区别

dom0级事件：绑定事件element.οnclick=function()\{\} 元素绑定同一类型事件时，后面的效果会覆盖前面的效果，如下代码，点击”点击“时，弹出框

逃离我推掉我的手/ 2022年05月28日 00:51/ 0 赞/ 286 阅读

相关 DOM绑定事件的三种方式

参考[事件绑定原理][Link 1] 1. 在DOM中绑定。在DOM中绑定有两种方式: 直接在html中onXxxx = "jsCode" 在html中on

旧城等待，/ 2022年05月25日 14:11/ 0 赞/ 322 阅读

相关 DOM 0级 and 2级事件模型

DOM（Document Object Model 文件对象模型） DOM将用例如XML、HTML等标记语言写成的结构化文档看成一颗树，该树上的节点也即是文档内的节点。简

本是古典何须时尚/ 2022年05月11日 15:52/ 0 赞/ 293 阅读

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

转自 [https://www.cnblogs.com/holyson/p/3914406.html][https_www.cnblogs.com_holyson_p_3914

你的名字/ 2022年04月05日 03:40/ 0 赞/ 334 阅读

相关事件处理程序（DOM0级）

DOM0事件处理程序每个元素都有自己的事件处理程序属性，那么直接获取对象，然后在对象上设置事件处理程序属性。 1：获取节点对象引用 2：在事件成员上设置处理函数，这时

朴灿烈づ我的快乐病毒、/ 2021年12月18日 15:11/ 0 赞/ 321 阅读