事件基础
文章目录
事件概述
JavaScript使我们有能力创建动态页面,而事件是可以被监测到的行为
简单理解:触发——响应机制
网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
事件三要素
事件是由三部分组成:事件源、事件类型、事件处理程序。称为事件三要素
<button id="btn">点击触发事件</button>
- 事件源:事件触发的对象,上述中的按钮就是事件源
let btn=document.querySelector('#btn');
- 事件类型:如何触发,什么事件,比如鼠标点击事件(onclick),还是鼠标经过,还是键盘按下
- 事件处理程序:通过一个函数赋值的方式完成
btn.onclick=function(){
alert('你触发了点击事件')
}
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采用函数赋值的形式)
常见的鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开时触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |