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对象。