事件
一、事件概述
JavaScript使我们有能力创建动态网页,而事件苦于被称为被JavaScript侦测到的行为。
简单可理解为
触发 — 响应机制
网页中每个元素都可以产生某些JavaScript的事件
例如我们可以给按钮进行设置
使用户在点击按钮的时候 发生一个事件
然后取执行操作
二、事件三要素
1 事件源 触发事件的元素 可以理解为 某个触发事件的人 (谁)
2 事件类型 可以理解为触发什么事情 例如 点击事件 click
3 事件处理程序 事件触发后要执行的代码(以函数的形式),事件处理函数 相当于做什么
简单理解为
事件三要素 = 谁(事件源)+什么事件(事件类型)+(做)事件处理程序
案例如下
var div = document.querySelector("div");
// 鼠标经过
div.onmouseover = function () {
this.style.backgroundColor = "blue";
};
三、执行事件的步骤
1 先获取事件源
2 注册事件
3 添加事件处理程序
获取事件源
var div = document.querySelector("div");
div.onmouseout 注册事件 = function () {
添加事件处理程序
this.style.backgroundColor = "pink";
};
四 、常见的鼠标事件
click 鼠标点击左键触发
dblclick 鼠标双击
mouseover 鼠标经过触发
mouseout 鼠标离开触发
focus 获取鼠标焦点时候触发
blur 失去鼠标焦点时触发
mousemove 鼠标移动触发
mouseup 鼠标弹起特效
mousedown 鼠标按下时触发