鼠标：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 ： 菜单
菜单环境事件