目录
事件组成
事件源 事件类型 事件处理程序 我们也称为事件三要素
1.事件源:事件被触发的对象 -->按钮对象 ...
2.事件类型:如何触发?触发什么事件?例如鼠标点击,键盘按下等…
3.事件处理程序:通过一个函数赋值的方式
执行事件的步骤:
1.获取事件源
2.注册事件(绑定事件)
3.采用函数赋值形式添加事件处理程序
事件对象
名称 | 描述 |
event | 返回事件的状态 |
事件对象常用的属性
名称 | 描述 |
target | 返回当前触发事件的元素 |
currentTarget | 返回监听事件的元素 |
clientX | 返回鼠标指针相对于浏览器的水平坐标 |
clientY | 返回鼠标指针相对于浏览器的垂直坐标 |
pageX | 返回鼠标指针相对于整个网页的水平坐标 |
pageY | 返回鼠标指针相对于整个网页的垂直坐标 |
offsetX | 返回鼠标指针相对于事件源元素的水平坐标 |
offsetY | 返回鼠标指针相对于事件源元素的垂直坐标 |
charCode | 通常用于 onkeypress 事件,返回用户按下按键对应的码值,区分大小写 示例:按下键盘 a,对应的值是 97, 按下键盘 A,对应的值是 65 |
keyCode | 通常用于 onkeydown 和 onkeyup 事件,返回用户按下按键的码值,不区分大小写。 示例:按下键盘 a 或 A, 对应的值是 65 |
常见的鼠标事件
DOM 0 级事件监听方式:on + 事件名
名称 | 描述 |
onclick | 监听鼠标单击事件 |
ondblclick | 监听鼠标双击事件 |
onmousedown | 监听鼠标按下事件 |
onmouseup | 监听鼠标松开事件 |
onmousemove | 监听鼠标移动事件 |
onmouseenter | 监听鼠标移入事件,不存在事件冒泡 |
onmouseleave | 监听鼠标离开事件,不存在事件冒泡 |
onmouseover | 监听鼠标移入事件,存在事件冒泡 |
onmouseout | 监听鼠标离开事件,存在事件冒泡 |
onmousewheel | 监听鼠标滚轮事件 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1{
width: 300px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<script>
var d1 = document.getElementById('d1');
// 单击事件
d1.onclick = function (event) {
console.log('click');
console.log(event);
}
// 双击事件
d1.ondblclick = function () {
console.log('dblclick');
}
// 鼠标移入事件
d1.onmouseenter = function () {
console.log('mouseenter');
}
// 鼠标移出事件
d1.onmouseleave = function () {
console.log('mouseleave');
}
// 鼠标在元素内部移动时触发
d1.onmousemove = function () {
console.log('mousemove');
}
</script>
</body>
</html>
常见键盘事件
DOM 0 级事件监听方式:on + 事件名
名称 | 描述 |
onkeydown | 用户按下键盘上某个键时触发,而且持续按住会重复触发。 |
onkeypress | 用户按下键盘上某个键并产生字符时触发,而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件,而推荐 textInput 事件。 |
keyup | 用户释放键盘上某个键时触发 |
焦点事件-FocusEvent
DOM 0 级事件监听方式:on + 事件名
名称 | 描述 |
blur | 当元素是焦点时触发。这个事件不冒泡,所有浏览器都支持 |
focus | 当元素获得焦点时触发。事件不冒泡,所有的浏览器都支持 |
focusin | 当元素获得焦点时触发,这个事件是focus的冒泡版 |
focusout | 当元素失去焦点时触发。这个事件时blur的冒泡版 |
<input type="text" id="inp1">
<script>
var inp1 = document.getElementById('inp1');
// 失去焦点触发
inp1.onblur = function () {
console.log('失去焦点');
console.log(this.value);
}
// 获得焦点触发
inp1.onfocus = function () {
console.log('获得焦点');
}
</script>
用户界面事件-UIEvent
DOM 0 级事件监听方式:on + 事件名
名称 | 描述 |
load | 监听页面或图像加载完成事件 |
onunload | 监听用户退出页面事件 |
select | 在文本框(<input>或 textarea)上当用户选择了一个或多个字符时触发。 |
resize | 在 window 或窗格上当窗口或窗格被缩放时触发。 |
scroll | 当用户滚动包含滚动条的元素时在元素上触发。<body>元素包含已加载页面的滚动条。 大多数 HTML 事件与 window 对象和表单控件有关。 |
常见的表单事件
DOM 0 级事件监听方式:on + 事件名
名称 | 描述 |
onchange | 当表单元素的内容发生变化所触发的事件 |
onfocus | 当元素获得焦点时触发的事件,例如:tab 键或者点击鼠标 |
onblur | 当元素失去焦点时触发的事件 |
onsubmit | 当提交表单时触发的事件 |
onreset | 当重置表单时触发的事件 |
DOM 2 级事件监听
名称 | 描述 |
addEventListener() | 监听事件并添加到指定的元素 1、方法中接收三个参数如下: (1)第一个参数是字符串,表示要监听的事件名,必须传入 (2)第二个参数是函数,指定事件触发时要执行的函数,必须传入 (3)第二个参数是布尔值,指定事件是否在捕获或冒泡阶段执行,可选 2、示例:oBox.addEventListener('click', function() {}, true) 在捕获阶段监听 oBox 的点击事件 |