JavaScript(事件)-优快云博客

本文链接：https://blog.youkuaiyun.com/APLL_/article/details/123693564

本文详细介绍了JavaScript中的事件，包括鼠标类事件（如click、mouseover等）、键盘类事件、window类事件和表单类事件。同时，讲解了事件流的概念，即事件从捕获到冒泡的过程，并阐述了如何通过事件侦听器来绑定和解绑事件。此外，还提到了事件绑定和解绑的不同方法及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件定义

用户在网页中的行为叫做事件

学习事件的目的：希望能自定义的让用户在网页中进行某种行为之后，去执行写好一段代码

语法：

事件源：on事件类型 = 函数

行内绑定：<标签 on 事件类型 = " 一行js代码或函数调用 "> </标签>

事件源：用户在触发事件的时候使用哪个标签 - 标签 - 获取标签

事件类型 - 用户在进行哪种行为；

1.鼠标类

单击 - click

双击 - dblclick

移入 - mouseover

移出 - mouseout

移入 - mouseenter

移出 - mouseleave

鼠标按下 - mousedown

鼠标松开 - mouseup

注意：按下和松开不针对哪个按键，只要是鼠标按键按下和松开就会触发

鼠标移动 - mousemove

滚轮滚动事件 - mousewheel

鼠标右击 - contextmenu

2.键盘类

键盘按下 - keydown - 不松开就一直触发

键盘抬起 - keyup - 使用频繁

敲击键盘 - keyprees - 其实也是按下

3.window类

加载事件 - load - 当网页中所有资源都有加载完成后，才会触发

滚动条滚动事件 - scroll - 当滚动条滚动了就会触发的事件

窗口大小改变事件 - resize - 当浏览器大小改变了就会触发的事件

4.表单类

获取焦点 - focus

失去焦点 - blur

下拉框选项改变的事件 - change

表单提交 - submit

注意：必须给form标签绑定

事件什么时候触发？当表单域中提交按钮（input的type为submit，或button的type为submit）被点击后或敲回车后触发，button默认就是submit

事件流

事件从开始发生到执行结束的流程

过程：

捕获：从外向内找目标元素

从window - document - document.documentElement - body - 父标签

目标：找到了，执行这个事件

冒泡：从内向外离开的过程 - 祖宗元素们的事件默认会在冒泡阶执行

事件绑定

事件侦听器 - 标签.addEventListener (事件类型，事件处理程序，是否在捕获阶段执行 - 可选 - 默认是false）

1.可以让事件在捕获阶段执行（非目标元素的事件）

2.可以让同类型的事件绑定多次并不会覆盖

绑定就是在内存存储事件

事件解绑

1.绑定事件的本质是在干什么？

将事件类型赋值为一个函数，存到内存中

2.为什么要解绑？

有些事件在执行结束后不要了

3.怎么解绑？

根据绑定方式不同，解绑方式也是不同的：

1.如果使用标签.on类型绑定的，给标签.on类型 = null
<body>
<button>按钮</button>
</body>

<script>
var btn = document.querySelector("button")
btn.onclick = functiong(){
    console.log(111）
    //delete this.onclick//删除对象的onclick属性

    this.onclick = null
    console.dir(this)
</script>
2.如果使用事件侦听器绑定的，就使用标签.removeEventListener(事件类型, 对应函数)

注意：如果绑定的是匿名函数，这个事件的解绑不了的，必须使用有名字的函数
var fn = function() {
    console.log(111);
}
btn.addEventListener('click', fn)
// 配套的解绑方法：removeEventListener
btn.removeEventListener('click', fn)