JavaScript之DOM(事件高级）

二、删除事件（解绑事件）

===========================================================================

1、删除事件的方式

---

1、传统注册方式

eventTarget.onclick = null;

例如删除某个按钮的点击事件（即让这个按钮只能有一次点击事件），代码如下：

按钮

运行效果为：

2、方法监听注册方式

1、removeEventListener方法

eventTarget.removeEventListener(type, listener[, useCapture]);

该方法接收三个参数：

• type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on

• listener：事件处理函数，事件发生时，会调用该监听函数

• useCapture：可选参数，是一个布尔值，默认是 false，表示冒泡阶段完成事件处理，true为捕获阶段完成事件处理。

例如：现在有两个按钮，当点击第二个按钮后，就将第一个按钮的点击事件删除，代码如下：

按钮

按钮2

运行效果为：

2、detachEvent方法

eventTarget.detachEvent(eventNameWithOn, callback);

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on

callback： 事件处理函数，当目标触发事件时回调函数被调用

注意：IE8 及早期版本支持。

该方法一般不推荐使用，在这里就不举例说明。

2、 删除事件兼容性解决方案

---

function removeEventListener(element, eventName, fn) {

// 判断当前浏览器是否支持 removeEventListener 方法

if (element.removeEventListener) {

element.removeEventListener(eventName, fn); // 第三个参数 默认是false

} else if (element.detachEvent) {

element.detachEvent(‘on’ + eventName, fn);

} else {

element[‘on’ + eventName] = null;

}

三、事件对象

=====================================================================

1、什么是事件对象

---

当一个事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是event。只有有了事件event才会存在，它是系统自动创建的，不需要传递参数。

event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

比如：

1. 谁绑定了这个事件。

2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

2、事件对象的使用

---

在标准浏览器中会将一个event对象直接传入到事件处理程序中，而早期版本的IE浏览器（IE 6~IE 8）中，仅能通过window.event才能获取事件对象。

使用语法为：

eventTarget.onclick = function(event) {

// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

}

eventTarget.addEventListener(‘click’, function(event) {

// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

}）

event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

比如，现在有一个按钮，给它添加点击事件，当我们点击该按钮时，打印其event对象，看看能否得到，代码如下：

按钮

打印结果为：

可以得到该对象的相关属性和方法。

3、事件对象的兼容性方案

---

事件对象本身的获取存在兼容问题：

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。

2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

解决:

e = e || window.event;

4、事件对象的常见属性和方法

---

| 事件对象属性方法 | 说明 |

| — | — |

| e.target | 返回触发事件的对象 标准 |

| e.srcElement | 返回触发事件的对象 非标准 |

| e.type | 返回事件的类型（比如click 不带on） |

| e.cancelBubble | 该属性阻止事件冒泡 非标准 |

| e.returnValue | 该属性阻止默认事件（默认行为）非标准 比如不让链接跳转 |

| e.preventDefault() | 该属性阻止默认事件（默认行为）标准 比如不让链接跳转 |

| e.stopPropagation() | 阻止冒泡 标准 |

就上述的例子，我们可以打印其事件对象的相关属性方法，例如打印该事件对象的类型和触发事件的对象，代码如下所示：

按钮

打印结果为：

再比如：阻止超链接的非跳转。代码如下：

百度一下

运行效果为：

四、常用的鼠标事件

========================================================================

1、常用鼠标事件

---

| 鼠标事件 | 触发条件 |

| — | — |

| onclick | 鼠标点击左键触发 |

| onmouseover | 鼠标经过触发 |

| onmouseout | 鼠标离开触发 |

| onfocus | 获得鼠标焦点触发 |

| onblur | 失去鼠标焦点触发 |

| onmousemove | 鼠标移动触发 |

| onmouseup | 鼠标弹起触发 |

| onmousedown | 鼠标按下触发 |

2、常用鼠标事件对象

---

| 鼠标事件对象 | 说明 |

| — | — |

| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |

| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |

| e.pageX | 返回鼠标相对于文档页面的X坐标 |

| e.pageY | 返回鼠标相对于文档页面的 Y坐标 |

| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |

| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |

例如做一个图片随着鼠标移动的案例，代码如下：

运行结果为：

五、常用的键盘事件

========================================================================

1、常用键盘事件

---

| 键盘事件 | 触发条件 |

| — | — |

| onkeyup | 某个按键被松开时触发 |

| onkeydown | 某个键盘按键被按下时触发 |

| onkeypress | 某个键盘按键被按下时触发（但它不识别功能键 比如ctrl shift 箭头等） |

注意：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-aeYHQR0W-1714910024128)]

[外链图片转存中…(img-3W5dAkGz-1714910024128)]

[外链图片转存中…(img-IZlrctgk-1714910024129)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！