页面事件

 

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

 

版权声明:本文为黎冬原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/m3276200366/p/16083793.html