什么是事件?
事件是在编程时系统内发生的动作或者发生的事情。比如用户在网页上点击一个按钮。
什么是事件监听?
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为绑定事件或者注册事件。比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等。
1.1事件监听
语法:元素对象.addEventListener("事件类型”,要执行的函数)
事件监听三要素
事件源:哪个dom元素被触发了,就要获取哪个dom元素
事件类型:用什么方式触发,比如鼠标单击click。
事件调用的函数:要做什么事。(事件处理程序:要做什么事情)
docunment.querySelector(" ")
如:点击
const btn=document.querySekector("button")
事件监听版本
DOM L0
事件源.on事件=function(){}
DOM L2
事件源.addEventListener(事件,事件处理函数)
区别:
on方式会被覆盖,addEventListener方式可绑定多次,拥有事件更多特性,推荐使用
1.2 事件监听版本
l发展史:
DOM L0 :是 DOM 的发展的第一个版本; L:level
DOM L1:DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2:使用addEventListener注册事件
DOM L3: DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新的事件类型。
鼠标事件
鼠标事件类型 | 描述 |
click | 鼠标点击某个对象 |
dblclick | 鼠标双击某个对象 |
mouseover | 鼠标被移到某元素之上 |
mouseout | 鼠标从某元素移开 |
mousedown | 某个鼠标按键被按下 |
mousemove | 鼠标被移动 |
mouseup | 某个鼠标按键被松开 |
mouseenter | 鼠标经过 |
mouseleave | 鼠标离开 |
表单事件
表单事件类型 | 描述 |
focus | 元素获得焦点 |
blur | 元素失去焦点 |
change | 用户改变域的内容 |
reset | 表单重置时触发 |
submit | 表单提交时触发 |
键盘事件
键盘事件类型 | 描述 |
keydown | 某个键被按下 |
keyup | 某个键松开 |
keypress | 按下并且松开 |
键盘事件声明的事件次序:keydown、keypress、keyup。
文本事件
文本事件类型 | 描述 |
input | 用户输入事件 |
浏览器事件
浏览器事件类型 | 描述 |
Load | 加载事件 |
resize | 改变窗口事件 |
scrall | 滚动事件 |