JavaScript事件
页面事件
JavaScript事件类型
Web浏览器中可能发生的事件有很多类型。这里我将主要将下面几种常用的事件类型：
- UI事件
- 焦点事件
- 鼠标与滚轮事件
- 键盘与文本事件
- 复合事件
- 变动事件
- HTML5事件
- 设备事件
- 触摸与手势事件
页面事件是在页面加载或者改变浏览器大小，位置，以及对页面的滚动条进行操作出发事件。
*onload 页面或图像加载完成时触发
*onunload 关闭页面或退出时触发
*onerror 加载文档或图像发生错误时触发
*onresize 改变窗口大小时触发
*onbeforeunload 当前页面改变时触发
随堂代码：
<!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>事件绑定</title>
</head>
<body>
<!– 开关灯案例 –>
<!– 灯亮:背景色变为红色 –>
<!– 灯灭:背景色变为灰色 –>
<button onclick=”openLight()”>开关</button>
<button id=”btn”>开关D</button>
<input type=”text”>
<script>
var clk = 1
function openLight() {
// 记录当前点击的次数
if (clk % 2 == 1) {
document.body.style.backgroundColor = “red”
} else {
document.body.style.backgroundColor = “#ccc”
}
clk++
}
// 动态事件绑定
document.getElementById(‘btn’).onclick = function () {
// 记录当前点击的次数
if (clk % 2 == 1) {
document.body.style.backgroundColor = “green”
} else {
document.body.style.backgroundColor = “pink”
}
clk++
}
window.onkeydown=function(e){
if(e.keyCode == 32){
console.log(“敲击了”+e.code+”键”);
}
// console.log(e);
}
</script>
</body>
</html>
1.在Javascript中，事件绑定一共有3种方式：
① 行内绑定
② 动态绑定
③ 事件监听
2.行内绑定
基本语法：
<标签 属性列表 事件=”事件的处理程序” />
例：<input type=’button’ onclick=’display()’ />
3、动态绑定
基本语法：
dom对象.事件 = 事件的处理程序（通常是一个匿名函数）
4、行内绑定与动态绑定的区别
在Javascript中，有一个特殊对象叫做this，其随着运行环境的不同，其指向也是不同的！
5、封装一个自定义函数
在Javascript中，我们操作的大多数都是dom对象，获取方式都是通过document.的形式，这样代码过于冗余，所以为了解决这个问题，我们封装一个自定义函数，专门用于获取指定id的dom对象。