0220 事件
单词
- event ：事件
- listen：听
- prevent：阻止
- default：不履行，默认
- target：目标
事件API
事件API是浏览器的内置接口。在事件API
事件是什么
- 事件是浏览器窗口内发生的动作
- 事件是一个对象
事件是浏览器窗口内发生的动作
- 事件并不是什么技术名词
- 事件是一个字符串名字而已，用这个名字表示浏览器窗口内发生的动作。
- click：单击
- mouseover：悬停
- Scroll：滚动
- Dbclick：双击
- keydown：键盘按下
- load：事件
- resize：重置大小
- 事件分为：
- 内置事件：由浏览器窗口触发
- 自定义事件：使用dispatch()方法手动触发
- 特定元素身上注册了特定的事件
- click：几乎所有的元素都注册了click事件
- load：加载事件
事件是一个对象
事件对象包含了与该事件相关的信息。
创建事件对象
new Event()
事件处理程序
事件处理程序指当事件发生的时候调用的函数。
如何将事件和事件处理程序关联起来
注册事件处理程序
当事件发生时，我们希望执行一个任务，那么这个任务就是一个事件处理函数。
为元素注册事件处理程序的方法有三种：
- 标签属性注册：通过标签的属性注册（HTML语言提供的注册事件处理程序的方法）
- 元素属性注册：通过DOM元素的属性注册（DOM0中提供的注册事件处理程序的方法）
- 元素方法注册：通过DOM元素的方法注册（DOM2中提供的注册事件处理程序的方法）
通过标签属性注册
语法
<标签 id='aaa' on事件名称 = '可执行的JS代码'></标签>
演示：
<button onclick="alert('hello world')">按钮1-1</button>
演示：图片load事件
<img src="https://inews.gtimg.com/newsapp_bt/0/14646737467/641" onload="alert('图片加载完成')" alt="">
使用DOM属性注册事件处理程序
语法：
元素.on事件名称 = function(ev){console.log(ev)}
元素.on事件名称= (ev) => {console.log(ev)}
示例：
btn.onclick = function(){
console.log('hello')
}
使用DOM2中提供的方法注册
方法：addEventListener()
add：添加
Event：事件
listener：监听器
语法
元素.addEventListener('事件名称',function(eventObject){},布尔值)
- 事件名称：是一个字符串，表示注册的事件，记住不带'on'
- function：事件处理程序/函数
- eventObj：是系统内自动传入的参数，表示该事件对象。
- 布尔值：事件传播方式是冒泡还是捕获。
