JS事件简介

最新推荐文章于 2023-01-05 17:01:25 发布

godton

最新推荐文章于 2023-01-05 17:01:25 发布

阅读量355

点赞数

分类专栏：前端学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/gdtown/article/details/126038845

版权

前端学习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细讲解了事件流在网页开发中的工作原理，包括事件冒泡与事件捕获两种模式，DOM0和DOM2事件处理的区别，以及如何使用addEventListener进行事件监听。还介绍了事件对象和各种常见事件类型及其应用。

摘要由CSDN通过智能技术生成

事件流

在一个页面中点击某个元素，并非只有触发了这个元素，还包括这个元素外的所有父级内容；用红宝书的描述：在一张纸上画多个同心圆，手指放在圆的中心，也同时放在了所有圆的中心。 IE浏览器和网景浏览器用了两种方法处理这种矛盾。
1. 事件冒泡
IE浏览器采用了冒泡的方法，冒泡是从底层元素冒到最高元素 Document 一层一层向上冒泡：
div -> body -> html -> document

2. 事件捕获
网景浏览器刚好相反，从顶层开始，元素最终捕获事件
document -> html -> body -> div

而在 DOM2 时期，定义了事件的三个阶段，事件捕获、到达目标、事件冒泡。

事件处理程序

事件处理分DOM0和DOM2事件处理，DOM0在设计模式中是观察者模式，是在冒泡阶段被触发

DOM0事件处理函数

let btn = document.getElementById('mybtn')
btn.onClick = function() {
	console.log('clicked')
}

但DOM1事件会被覆盖，只能处理一个对应的函数。

DOM2事件处理函数

DOM2的事件处理可以控制在冒泡阶段还是捕获阶段触发，是发布订阅模式。
addEventListener( 'Event', Function, Boolean)
Event是触发的事件名，Function是对应的处理函数，Boolean的flase是默认值，表示在冒泡阶段；true为捕获阶段。

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' _ => { console.log('clicked'), true)

DOM2 的优点在于可以添加多个处理函数，且不会被覆盖

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' _ => { console.log('clicked'), true)
btn.addEventLisenter('click' _ => { console.log('HelloWorld'), false)

事件对象

所有事件都会自带一个事件对象，这个对象会在调用函数时传入

let btn = document.getElementById('mybtn')
btn.onClick = function(e) {
	console.log(e) //PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
}

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' e => { console.log(e), true)
//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}