鼠标：mouse
光标：cursor 刻涩
事件是什么
- 事件是浏览器窗口内发生的动作
- 事件是一个对象
事件是浏览器窗口内发生的动作
- 事件并不是什么技术名词
- 事件是一个字符串名字而已，用这个名字表示浏览器窗口内发生的动作
click 单击
mouseover 悬停
Scroll 滚动
Dbclick 双击
keydowr 键盘按下
wheel 鼠标滚动触发
contextMenu事件
input事件
- input事件:当input ,select和textarea这三个元素的值发生改变时触发 ：可以冒泡
- change事件:当input ,select和textarea这三个元素的值发生改+失去焦点变时触发 ：可以冒泡
- focus 获得焦点 ：不会冒泡
- blur 失去焦点 ：不会冒泡
- 合成事件
- 事件分为：
内置事件：由浏览器窗口触发
自定义事件：使用dispatch（）方法手动触动 - 特定元素身上注册了特定事件
click ：几乎所有的元素都注册了click事件
load：
window.onload:DOM为了window注册了load事件
div.onload(错误) DOM没有为div注册load事件
Event API
事件API是浏览器的内置接口，在事件API中，核心对象是Event构造函数
语法：
new Event("事件名称",{选项对象（必选）：描述事件信息})
btn.dispatchEvent(myEvent) 手动触发自定义事件
事件是什么
跳过
事件处理程序
事件处理程序指当事件发生的时候调用的函数
如何将事件和事件处理程序关联起来
注册事件处理程序
当事件发生时，外面希望执行一个任务，那么这个任务就是一个事件处理函数。为元素注册事件处理程序的方法有三种：
- 标签属性注册：通过标签的属性注册（HTML语言提供的注册事件处理程序的方法）
- 元素属性注册：通过DOM元素的属性注册(DOM0提供的注册事件处理程序的方法)
- 元素方法注册：通过DOM元素的方法注册（DOM2提供的注册事件处理程序的方法）
标签属性注册
语法：
<标签 id='aaa' on事件名称 = '可执行的代码'></标签>
实例
<button onclick="alert('1+1')">按钮1</button>
1.load事件
<img src="u=2335431302,3987923331&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="" onload="alert('图片加载完毕')">
使用DOM属性注册事件处理程序
语法：
元素.on事件名称 = function（）{}
元素.on事件名称 = （）=>{}
使用DOM2中提供的方法注册
方法.addEventListner()
add:添加
Event：事件
listener：监听
语法：
元素.addEventListner("事件名称"，事件处理函数,布尔值)
元素.addEventListner("事件名称"，function（）{},布尔值)
- 事件名称：是一个字符串，表示注册的事件，记住不带“on”
- function：事件处理程序/函数
eventObj：是系统欸自动传入的参数，表示该事件对象。 - 布尔值：事件传播的方式是冒泡还是捕获
事件对象是什么？
eventobject
事件对象包含了与事件有关的信息，就是事件对象。
事件对象代表事件的状态，事件发生后，跟事件相关的一系列的集合都放到这个对象里面，这个对象就是事件对象，它有很多属性和方法。
如和向事件对象处理函数传入事件对象
<button onclick="fn(event)"></button>
const btn = document.quserySelectir("button")
//1.
function fn(形参){
console.log(刑参)
}
//2.
btn.onclick = function(变量名){
console.log(变量名)
}
//3.
btn.addEventListener("事件名称",function(变量名){
console.log(变量名)
})
工作中如何使用冒泡
把事件处理程序注册到父级元素身上
contextMenu事件
context：上下文 -> 环境
Menu ： 菜单
菜单环境事件
