JavaScript 之事件（入门详细）

木木1.1.1.1

于 2024-08-29 15:42:52 发布

阅读量846

点赞数 12

分类专栏： JavaScript 文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/m0_74279984/article/details/141680439

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件

初始化对象事件对象

事件类型包括有系统事件和自定义事件

创建一个事件目标对象的实例化对象

EventTarget 事件目标对象，用来侦听事件，（Event）事件对象就是被侦听的事件内容

例子：张三接受一份邮件张三就是EventTarget，邮件就是Event

自定义事件

事件侦听

EventTarget的方法addEventListener(事件类型,事件回调函数,是否捕获侦听/事件侦听选项{是否捕获侦听，是否只侦听一次})

所有事件回调函数命名都需要使用Handler结尾单词
事件回调函数尽量不要去使用匿名函数，使用后，这个事件将无法被删除
事件类型中自定义事件名称可以任意使用任何字符串
当接受demo01这个事件类型时，直接调用事件的回调函数
事件的回调函数中有仅有一个参数，这个参数就是抛发的事件对象
创建事件时，事件类型必须和侦听事件时的事件类型完全一致

抛发事件

创建事件时，事件类型必须和侦听事件时的事件类型完全一致

创建事件

bubbles:true 表示支持冒泡

使用EventTarget抛发事件把Event这个事件对象抛发给EventTarget

事件侦听的对象和要抛发给目标对象必须一致

完成事件的步骤

1、事件侦听的目标对象必须和事件要抛发的目标对象一致

2、事件侦听的事件类型和要发抛发事件的事件类型必须一致

3、必须先侦听，后抛发

删除侦听

删除事件侦听内容，removeEventListener(事件类型，事件回调函数)

事件回调函数必须和事件侦听时的回调函数引用指向完全相同

事件

事件作用

解耦

所有继承EventTarget的类型，都可以做事件的侦听和抛发

document--- HTMLDocument-->Document-->Node-->EventTarget-->Object

普通的删掉一个另一个报错

使用事件

事件基础

系统事件

事件三阶段

事件在嵌套容器中，是经历三个阶段，第一个捕获阶段。第二个目标阶段，到达目标。第三个冒泡阶段从内向外

默认收到事件的顺序是冒泡阶段

once:true只能触发一次事件，然后这个事件就会被删除

与once配套的 capture:true 表示捕获阶段触发

e.stopPropagation()

停止冒泡停止事件的继续传递。可以在捕获和冒泡阶段使用，捕获阶段事件禁止传递给子元素，冒泡阶段事件禁止传递给父元素

想要点击时不点击div 两种方法--都在捕获阶段 1. 在div2的回调函数中使用e.stopPropagation()。 2.在css样式中div3中 pointer-events: none;（设置div3不接受事件）

捕获阶段

从外向内

设置第三个参数为true，表示捕获阶段触发

可以控制哪个被先触发

目标阶段

到达目标

冒泡阶段

从内向外

e的属性

e 就是事件传递的Event对象

DOM事件传递时会自带一些属性

target currentTarget srcElement

e.target e.srcElement(IE兼容的) 是事件实际触发的目标对象

e.currentTarget this 事件侦听的对象

this指向

四个常量

这四个常量属性代表事件触发的时机

e.eventPhase 触发时机

e.AT_TARGET 2 目标阶段
e.BUBBLING_PHASE 3 冒泡阶段
e.CAPTURING_PHASE 1 捕获阶段
e.NONE 0 无（开始或结束）

使用判断当前触发事件的时机是不是冒泡阶段

其他

e.bubbles 当前事件是否冒泡只读属性系统事件会自动冒泡自定义事件不会自动冒泡
e.cancelBubble 阻止当前事件冒泡早期IE浏览器使用等同于e.stopPropagation()
e.isTrusted 触发当前事件时是系统触发还是自定义触发 true表示系统事件触发， false表示自定义事件触发
e.defaultPrevented 判断是否阻止默认事件
returnValue 阻止默认行为早期IE浏览器的等同于e.preventDefault();
e.timeStamp 从页面打开到当前事件触发经过毫秒数
e.type 事件触发的类型侦听的事件类型
e.target
e.currentTarget
e.srcElement

事件委托

子元素的事件委托给父元素侦听

每个元素侦听会占有内存。把事件委托给父元素，这样可以保证只侦听一个，减少内存的占有

使用e.target -->实际触发的目标对象

因为每个元素侦听，都会触发对应的函数，就会执行多个函数，事件委托只会执行一个函数

系统事件也可以通过自定义抛发事件触发

默认事件的抛发不会向父容器冒泡

解决方法：

{bubbles:true} 设置当前自定义事件允许向父容器冒泡

Event属于基类

自定义抛发鼠标点击事件，在这里使用clientX，clientY分别设置被点击的位置

事件阻止默认行为

1、提交表单默认提交表单会自动跳转页面，submit 阻止以后不会跳转

2、重置表单默认会清空表单里的数据 reset 阻止后不会清除

3、容器中文本默认可以选中文本， mousedown事件时，阻止后不能选中文本

4、图片拖拽默认拖拽中会产生禁拖标志 mousedown事件时，不会产生禁拖标志

5、单击右键菜单时默认会有浏览器的菜单 contextmenu阻止后不会有菜单

? search

# hash

(old)SSR Server Side Render

(new)CSR Client Side Render 别称 ---SPA 单页面应用

e.preventDefault();

阻止默认行为

阻止后续事件函数的执行同一个事件

e.stopImmediatePropagation();

div3将不执行

Event事件

输入文本框必须设置name属性标签中的name属性在提交时就会把对应的内容放在search部分
checkbox(多选)和radio(单选) name的作用是群组必须设置value值

submit 表单提交事件

reset 表单重置事件

当提交表单和重置表单时，不能侦听按钮的click事件，必须使用表单侦听submit和reset

change 表单修改事件

change 触发需要改变表单数据中内容，并且失去焦点

change是可以事件委托的，可以委托给form

form侦听change，当表单元素中任意一个触发change都会收到冒泡

select input文本框文本选中事件

当文本框中的内容被选中时触发这个事件

得到文本框中选中文本的起始下标和结束下标

load 加载事件图片加载、文件加载、通信加载

error 错误事件

scoll 滚动条事件

scrollTop 滚动条上下的位移

scrollLeft 滚动条左右的位移

ArrayBuffer 二进制流数组类型

图片位图矢量图像素图

图片中的二进制流数组 [255,255,255,255,255,255,255,255]

RGBA 255 255 255 255

红色 255 0 0 255

绿色 0 255 0 255

黄色 0 0 255 255

255 -->二进制 11111111 占位1B

// 图片加载时会得到一个meta数据

创建文档-->创建CSS树-->创建DOM树-->创建DOM渲染树-->加载完成-->执行页面script中module内容

同步和异步

link加载css 同步加载

script加载js 默认同步加载可以异步

script中

async异步加载什么时候加载完成js，什么时候执行js，一般都会在DOM树创建完成后执行

defer异步加载在DOM树渲染完成后执行js

script模块化在DOM树渲染完成后加载并执行

img加载图片 video加载视频异步加载

图片加载是一个异步谷歌浏览器先加载meta同步后在继续异步加载图片，所以可以看到图片的宽高