事件监听(注册事件)
语法:
元素.addEventListener('事件',要执行的函数)
//例如
let btn = document.querySelector("button")
btn.addEventListener("clilk", function(){
alert('点击事件')
})
注意:
- 事件类型要加引号
- 函数是点击之后再去执行,每次点击都会执行一次
事件监听三要素:
谁被触发 / 用什么方式 / 要做什么
- 事件源:哪个dom元素被事件触发了,要获取dom元素
- 事件(字符串):用什么方式触发,比如鼠标单击click、鼠标经过mouseover等
- 事件调用的函数:要做什么事
事件监听版本
DOM L0
事件源.on事件 = function() { }
DOM L2
事件源.addEventListener(事件, 事件处理函数)
发展史:
- DOM
L0
:是 DOM 的发展的第一个版本; L:level- DOM
L1
:DOM级别1 于1998年10月1日成为W3C推荐标准- DOM
L2
:使用addEventListener注册事件- DOM
L3
:DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型
事件类型
鼠标事件 | 焦点事件 | 键盘事件 | 文本事件 |
---|---|---|---|
鼠标触发 | 表单获得光标 | 键盘触发 | 表单输入触发 |
click 鼠标点击 |
focus 获得焦点 |
Keydown 键盘按下触发 |
input 用户输入事件 |
focus 获得焦点 |
blur 失去焦点 |
Keyup 键盘抬起触发 |
|
mouseenter 鼠标经过 |
发表回复