event：事件 衣安特
listen：听 类神
prevent：防止 普为完特
default：违约 得佛特
target：目标 踏给特
事件
Event API
事件API是浏览器的内置窗口。在事件API中，核心对象是Event
事件
事件是什么？
- 事件是浏览器窗口内发生的动作
- 事件是一个对象
事件是浏览器窗口内发生的动作
- 事件并不是什么技术名词。
- 事件是一个字符串名字而已，用这个名字表示浏览器窗口内发生的动作。
- click：单击
- mouseover：悬停
- Scroll：滚动
- Dbclick：双击
- keydown：键盘按下
- load：加载事件
- resize：重置大写事件
- 事件分为：
- 内置事件：由浏览器窗口触发
- 自定义事件：使用dispatch()方法手动触发
- 特定元素身上注册了特定的事件
- click：几乎所有的元素都注册了click事件
- load：加载事件
- window.onload : DOM为
事件是一个对象
事件对象包含了与该事件相关的信息
事件的模样：{ }
创建事件对象
new Event()
事件处理程序
事件处理程序指当事件发生的时候调用的函数。
任何将事件和处理程序关联起来
注册事件处理程序
当事件发生时，我们希望执行一个任务，那么这个任务就是一个事件处理函数。
为元素注册事件处理程序的方法有三种：
- 标签属性注册：通过标签的属性注册（HTML语言提供的注册事件处理程序的方法。）
- 元素属性注册：通过dom元素的属性注册（DOM0中提供的注册事件处理程序的方法。）
- 元素方法注册：通过DOM元素的方法注册（DOM2中提供的注册事件处理程序的方法）
标签属性注册
语法
<标签 id="aaa" on事件名称 = “可执行的JS代码”> </标签>
示例
<button onclick = "alert('Hello World')">按钮1-1</button>
<button onclick = "console.log('1 + 1')">按钮1-2</button>
<button onclick = "console.log(1 + 1)">按钮1-3</button></button>
load事件
<img src="https://img1.baidu.com/it/u=1605341541,1182642759&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" onload="alert('图片加载完毕')" alt="">
使用DOM属性注册事件处理程序
语法
元素.on事件名称 = function(){}
元素.on事件名称 = () => {}
示例
btn.onclick = function(){
console.log('hello');
}
使用DOM2中提供的方法注册
方法：addEventListener()：添加事件监听器
add：添加
Event：事件
listener：监听器
元素.addEventListener()
元素.addEventListener('事件名称',function(eventObject){},布尔值)
- 事件名称：是一个字符串，表示注册的事件，记住不带'on'
- function：事件处理程序/函数
- eventObj：是系统内自动传入的参数，表示该事件对象，包含了该事件的信息
- 布尔值：事件传播方式是冒泡还是捕获
