事件概述
-
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为
-
简单理解:触发—响应机制
-
网页中的每一个元素都可以产生某些可以触发 JavaScript 的事件
事件三要素
事件源
- 事件被触发的对象
事件类型
- 如何触发
事件处理程序
- 通过一个函数赋值的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
// 1.事件源
var btn = document.getElementById('btn');
// 2.事件类型(鼠标点击:onclick)
// 3.事件处理程序
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
</html>
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
// 1.获取事件源
var div = document.querySelector('div');
// 2.绑定事件(注册事件)
// div.onclick
// 3.添加事件处理程序
div.onclick = function () {
console.log('我被选中了');
}
</script>
</body>
</html>