第二十七章 详解事件处理

JavaScript

目录

27-1 mousedown 事件、mouseup 事件：当鼠标按钮被按下和释放时
27-2 mousemove事件：鼠标移动时
27-3 mouseenter 事件、mouseleave 事件：当鼠标悬停时
27-4 通过MouseEvent可以获得的坐标信息和按键信息
27-5 keydown 事件，keyup 事件：当按键被按下和释放时
27-6 可以通过KeyboardEvent获取的按键信息
27-7 change 事件：当表单或选择菜单改变时
27-8 input事件：当在表单中输入一个字符时
27-9 copy,cut,paste：复制、剪切或粘贴时
27-10 load事件：加载事件：当页面完成加载时
27-11 DOMContentLoaded 事件：DOM 树的构建完成时
27-12 beforeunload 事件：就在页面被卸载之前
27-13 resize事件：窗口大小改变时

27-1 mousedown 事件、mouseup 事件：当鼠标按钮被按下和释放时

mousedown 事件是在按下鼠标按钮时发生的事件。mouseup 事件是在释放鼠标按钮时发生的事件。您可以为 onmousedown 属性（或 onmouseup 属性）、onmousedown 属性（或 onmouseup 属性）设置事件处理程序，或者通过将 mousedown 或 mouseup 指定为 addEventListener 方法的参数来注册事件侦听器。本节介绍如何使用JavaScript编写mousedown和mouseup事件发生时的处理。

使用 mousedown 和 mouseup 事件

mousedown 事件是在鼠标光标位于元素上时按下鼠标时发生的事件。发生在 Element 对象上。

事件类型 : MouseEvent
冒泡可用性 : 可能
取消可用性 : 可能

mouseup 事件是当鼠标光标在元素上时从按下状态释放鼠标时发生的事件。发生在 Element 对象上。

事件类型: MouseEvent
冒泡可用性 : 可能
取消可用性 : 可能

使用 onmousedown 和 onmouseup 属性为元素属性值注册事件处理程序。

onmousedown 属性 onmouseup 属性
<input type="button" value="button" onmousedown="mouseDown()"
  onmouseup="mouseUp()">

<script>
function mouseDown(){
    console.log('MouseDown');
}
</script>

<script>
function mouseUp(){
    console.log('MouseUp');
}
</script>

使用 onmousedown 和 onmouseup 属性在使用 DOM 检索的元素的属性上注册事件处理程序。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

onmousedown 属性 onmouseup 属性

<input type="button" value="button" id="xxx">

<script>
function mouseDown(){
    console.log('MouseDown');
}

function mouseUp(){
    console.log('MouseUp');
}

let button = document.getElementById('xxx');
button.onmousedown = mouseDown;
button.onmouseup = mouseUp;
</script>

使用 addEventListener 方法注册事件侦听器时，将“mousedown”或“mouseup”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法

<input type="button" value="button" id="xxx">

<script>
function mouseDown(){
    console.log('MouseDown');
}

function mouseUp(){
    console.log('MouseUp');
}

let button = document.getElementById('xxx');
button.addEventListener('mousedown', mouseDown);
button.addEventListener('mouseup', mouseUp);
</script>

当您使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于 mousedown 和 mouseup 事件，传递一个继承自 Event 对象的 MouseEvent 对象。

<input type="button" value="button" id="xxx">

<script>
function mouseDown(event){
    console.log(event);
}

function mouseUp(event){
    console.log(event);
}

let button = document.getElementById('xxx');
button.addEventListener('mousedown', mouseDown);
button.addEventListener('mouseup', mouseUp);
</script>

您可以通过引用在事件处理程序或事件侦听器中传递的 MouseEvent 对象的属性来引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mycanvas{
border:1px solid #000000;
}
</style>
</head>
<body>

<p>在画布上画一条直线</p>

<canvas id="mycanvas" width="600" height="200"></canvas>

<script>
let startx = 0;
let starty = 0;

function mouseDown(event){
    startx = event.offsetX;
    starty = event.offsetY;

    context.beginPath();
    context.arc(startx, starty, 10, 0, 2 * Math.PI);
    context.stroke();
}

function mouseUp(event){
    context.beginPath();
    context.moveTo(startx, starty);
    context.lineTo(event.offsetX, event.offsetY);
    context.stroke();

    context.beginPath();
    context.arc(event.offsetX, event.offsetY, 10, 0, 2 * Math.PI);
    context.stroke();
}

let mycanvas = document.getElementById('mycanvas');
let context = mycanvas.getContext('2d');

mycanvas.addEventListener('mousedown', mouseDown);
mycanvas.addEventListener('mouseup', mouseUp);
</script>

</body>
</html>

在屏幕上显示的 canvas 元素上显示从按下鼠标的位置到释放鼠标的位置的直线。

click、mousedown 和 mouseup 事件发生的顺序

mousedown事件是鼠标按下的时候，mouseup事件是鼠标松开的时候。一个类似的事件是 click 事件，它在按下和释放鼠标时触发。

如果您为同一元素上的三个事件注册事件侦听器，然后单击鼠标，则事件触发的顺序为 mousedown -> mouseup -> click 。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>单击按钮。</p>

<input type="button" value="button" id="btn">

<script>
let button = document.getElementById('btn');

button.addEventListener('click', function(){
    console.log('Click');
});

button.addEventListener('mousedown', function(){
    console.log('MouseDown');
});

button.addEventListener('mouseup', function(){
    console.log('MouseUp');
});
</script>

</body>
</html>

input 元素为 click、mousedown 和 mouseup 事件注册了三个事件侦听器。单击屏幕上显示的输入元素会依次调用 mousedown 事件、mouseup 事件和 click 事件的事件侦听器。

27-2 mousemove事件：鼠标移动时

mousemove 事件是当鼠标在目标元素内移动时发生的事件。您可以为 onmousemove 属性或 onmousemove 属性设置事件处理程序，或者通过将 mousemove 指定为 addEventListener 方法的参数来注册事件侦听器。在这里，我将解释如何使用 JavaScript 编写 mousemove 事件发生时的处理。

如何使用mousemove事件

当鼠标光标悬停在某个元素上时鼠标移动时会触发 mousemove 事件。移动时事件不断发生。事件在 Element 对象上触发。

事件类型 : MouseEvent
冒泡可用性 : 可能
取消可用性 : 可能

使用 onmousemove 属性为元素属性值注册事件处理程序。

onmousemove 属性
<canvas id="mycanvas" onmousemove="mouseMove()">

<script>
function mouseMove(){
    console.log('MouseMove');
}
</script>

使用 onmousemove 属性在使用 DOM 检索的元素的属性上注册事件处理程序。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

onmousemove 属性
<canvas id="mycanvas">

<script>
function mouseMove(){
    console.log('MouseMove');
}

let mycanvas = document.getElementById('mycanvas');
mycanvas.onmousemove = mouseMove;
</script>

使用 addEventListener 方法注册事件侦听器时，将“mousemove”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。（

addEventListener 添加事件监听器方法

<canvas id="mycanvas">

<script>
function mouseMove(){
    console.log('MouseMove');
}

let mycanvas = document.getElementById('mycanvas');
mycanvas.addEventListener('mousemove', mouseMove);
</script>

当您使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于 mousemove 事件，会传递一个继承自 Event 对象的 MouseEvent 对象。

<canvas id="mycanvas">

<script>
function mouseMove(event){
    console.log(event);
}

let mycanvas = document.getElementById('mycanvas');
mycanvas.addEventListener('mousemove', mouseMove);
</script>

可以通过引用在事件处理程序或事件侦听器中传递的 MouseEvent 对象的属性来引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mycanvas{
border:1px solid #000000;
}
</style>
</head>
<body>

<p>在画布上画出鼠标移动的轨迹</p>

<canvas id="mycanvas" width="600" height="200"></canvas>

<script>
function mouseMove(event){
    context.beginPath();
    context.arc(event.offsetX, event.offsetY, 10, 0, 2 * Math.PI);
    context.stroke();
}

let mycanvas = document.getElementById('mycanvas');
let context = mycanvas.getContext('2d');

mycanvas.addEventListener('mousemove', mouseMove);
</script>

</body>
</html>

将鼠标移到屏幕上显示的画布元素上会在移动时在鼠标位置绘制一个圆圈。

27-3 mouseenter 事件、mouseleave 事件：当鼠标悬停时

mouseenter 事件是当鼠标悬停在目标元素上时发生的事件。mouseleave 事件是鼠标离开目标元素时发生的事件。您可以为 onmouseenter 属性（或 onmouseleave 属性）或 onmouseenter 属性（或 onmouseleave 属性）设置事件处理程序，或者通过将 mouseenter 或 mouseleave 指定为 addEventListener 方法的参数来注册事件侦听器。本节介绍如何使用JavaScript编写mouseenter或mouseleave事件发生时的处理。

如何使用mouseenter事件和mouseleave

mouseenter 事件是当鼠标光标悬停在元素上时发生的事件。事件在 Element 对象上触发。

事件类型 : MouseEvent
冒泡可能性 : 不可
取消可能性 : 不可

mouseleave 事件是鼠标光标离开元素时发生的事件。事件在 Element 对象上触发。

事件类型 : MouseEvent
冒泡可能性 : 不可
取消可能性 : 不可

使用 onmouseenter 或 onmouseleave 属性为元素属性值注册事件处理程序。

onmouseenter 属性 onmouseleave 属性
<div id="mybox" onmouseenter="mouseEnter()"
  onmouseleave="mouseLeave()">
</div>

<script>
function mouseEnter(){
    console.log('MouseEnter');
}
</script>

<script>
function mouseLeave(){
    console.log('MouseDown');
}
</script>

使用 onmouseenter 或 onmouseleave 属性在使用 DOM 检索的元素的属性上注册事件处理程序。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

onmouseenter 属性 onmouseleave 属性
<div id="mybox"></div>

<script>
function mouseEnter(){
    console.log('MouseEnter');
}

function mouseLeave(){
    console.log('MouseDown');
}

let mybox = document.getElementById('mybox');
mybox.onmouseenter = mouseEnter;
mybox.onmouseleave = mouseLeave;
</script>

使用 addEventListener 方法注册事件侦听器时，请将“mouseenter”或“mouseleave”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法

<div id="mybox"></div>

<script>
function mouseEnter(){
    console.log('MouseEnter');
}

function mouseLeave(){
    console.log('MouseDown');
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('mouseenter', mouseEnter);
mybox.addEventListener('mouseleave', mouseLeave);
</script>

当您使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于 mouseenter 和 mouseleave 事件，传递一个继承自 Event 对象的 MouseEvent 对象。

<div id="mybox"></div>

<script>
function mouseEnter(event){
    console.log(event);
}

function mouseLeave(event){
    console.log(event);
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('mouseenter', mouseEnter);
mybox.addEventListener('mouseleave', mouseLeave);
</script>

可以通过引用在事件处理程序或事件侦听器中传递的 MouseEvent 对象的属性来引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mybox{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>根据鼠标改变背景颜色</p>

<div id="mybox"></div>

<script>
function mouseEnter(){
    mybox.style.backgroundColor = '#c72929';
}

function mouseLeave(){
    mybox.style.backgroundColor = '#ffffff';
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('mouseenter', mouseEnter);
mybox.addEventListener('mouseleave', mouseLeave);
</script>

</body>
</html>

当鼠标悬停在可见的 div 元素上时将背景颜色更改为姜红色，并在鼠标离开时将背景颜色更改为白色。

mouseenter 和 mouseover 事件的区别

与 mouseenter 事件类似的事件是 mouseover 事件。mouseover 事件也是当鼠标光标悬停在元素上时触发的事件。

事件类型 : MouseEvent
冒泡可用性 : 可能
取消可用性 : 可能

mouseenter 和 mouseover 事件的最大区别在于它们是否冒泡。mouseenter 事件不会冒泡，而 mouseover 事件会冒泡。

与 mouseleave 事件类似的还有 mouseout 事件。mouseout事件也是鼠标光标离开元素时发生的事件，这两个事件的区别在于是否冒泡。

这些事件的行为不同，例如当目标元素中有另一个元素时。如果你写了 mouseenter 和 mouseleave 事件的处理，外层元素不会捕获事件，因为当这些事件发生在内层元素上时它不会冒泡，但是你会写 mouseover 和 mouseout 事件的处理，外层元素也当这些事件发生在内部元素上时，通过冒泡捕获事件。

尝试以下示例以查看实际行为的差异。

对于 mouseenter 和 mouseleave 事件

让我们首先尝试 mouseenter 和 mouseleave 事件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#outerbox{
width:400px;
height:200px;
border:1px solid #000000;
}

#innerbox{
border:1px solid #000000;
width:200px;
height:100px;
margin:50px 100px;
}
</style>
</head>
<body>

<p>检查鼠标事件</p>

<div id="outerbox">outerbox
	<div id="innerbox">innerbox</div>
</div>

<script>
function mouseEnter(e){
    console.log('[mouseEnter] ' + 'current:'
      + e.currentTarget.id + ', target:' + e.target.id);
}

function mouseLeave(e){
    console.log('[mouseLeave] ' + 'current:'
      + e.currentTarget.id + ', target:' + e.target.id);
}

let outerbox = document.getElementById('outerbox');
outerbox.addEventListener('mouseenter', mouseEnter);
outerbox.addEventListener('mouseleave', mouseLeave);

let innerbox = document.getElementById('innerbox');
innerbox.addEventListener('mouseenter', mouseEnter);
innerbox.addEventListener('mouseleave', mouseLeave);
</script>

</body>
</html>

它具有外部和内部 div 元素，每个元素都使用 addEventListener 方法为 mouseenter 和 mouseleave 事件注册事件侦听器。

当鼠标从 div 元素外部进入外部 div 元素时，会在外部 div 元素上生成 mouseenter 事件。

当鼠标按原样进入内部 div 元素时，会在内部 div 元素上生成 mouseenter 事件。mouseenter 事件不会冒泡，因此外部 div 元素永远不会触发 mouseenter 事件。此外，外部 div 元素不会触发 mouseleave 事件。

当鼠标随后从内部 div 元素移动到外部 div 元素时，内部 div 元素将触发 mouserleave 事件。外部 div 元素永远不会触发 mouseleave 事件，因为 mouseleave 事件不会冒泡。此外，外部 div 元素不会触发 mouseenter 事件。

当鼠标离开外部 div 元素时，将在外部 div 元素上触发 mouserleave 事件。

mouseover悬停和mouseout移出的区别

然后尝试使用 mouseover 和 mouseout 事件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#outerbox{
width:400px;
height:200px;
border:1px solid #000000;
}

#innerbox{
border:1px solid #000000;
width:200px;
height:100px;
margin:50px 100px;
}
</style>
</head>
<body>

<p>检查鼠标事件</p>

<div id="outerbox">outerbox
	<div id="innerbox">innerbox</div>
</div>

<script>
function mouseOver(e){
    console.log('[mouseOver],' + 'current:'
      + e.currentTarget.id + ', target:' + e.target.id);
}

function mouseOut(e){
    console.log('[mouseOut ],' + 'current:'
      + e.currentTarget.id + ', target:' + e.target.id);
}

let outerbox = document.getElementById('outerbox');
outerbox.addEventListener('mouseover', mouseOver);
outerbox.addEventListener('mouseout', mouseOut);

let innerbox = document.getElementById('innerbox');
innerbox.addEventListener('mouseover', mouseOver);
innerbox.addEventListener('mouseout', mouseOut);
</script>

</body>
</html>

它具有外部和内部 div 元素，每个元素都使用 addEventListener 方法为 mouseover 和 mouseout 事件注册事件侦听器。

当鼠标从 div 元素外部进入外部 div 元素时，会在外部 div 元素上产生 mouseover 事件。

当鼠标按原样进入内部div元素时，首先在外部div元素上产生mouseout事件。然后在内部 div 元素上触发 mouseover 事件。由于 mouseover 事件是冒泡的，因此外部 div 元素也会触发 mouseover 事件。

然后当鼠标从内部 div 元素移动到外部 div 元素时，内部 div 元素首先触发 mouseout 事件。由于 mouseout 事件是冒泡的，因此外部 div 元素也会触发 mouseout 事件。然后在外部 div 元素上触发 mouseover 事件。

当鼠标离开外部 div 元素时，外部 div 元素会触发 mouseout 事件。

如您所见，mouseenter 和 mouseleave、mouseover 和 mouseout 的行为根据是否执行冒泡而有所不同。根据事件的使用方式来决定使用哪个事件。

27-4 通过MouseEvent可以获得的坐标信息和按键信息

当与鼠标相关的事件（例如单击事件或 mousemove 事件）发生并调用事件处理程序和事件侦听器时，会向它们传递一个 MouseEvent 对象，该对象包含有关作为参数发生的事件的信息。MouseEvent 对象包含有关事件发生时按下的键的信息，以及鼠标单击或移动位置的坐标。在这里，我们将说明如何获取和使用MouseEvent中包含的坐标信息和按键信息。

坐标属性

MouseEvnet 对象具有表示事件发生时鼠标坐标的属性。根据坐标的来源提供了几个属性。

MouseEvent.offsetX  相对于发生事件的元素左上角的坐标
MouseEvent.offsetY  同上
MouseEvent.clientX  以浏览器显示区域的左上角为原点坐标
MouseEvent.clientY  同上
MouseEvent.screenX  坐标相对于显示器的左上角
MouseEvent.screenY  同上

另外，如果浏览器中显示的网页纵横较长，浏览器中只显示部分页面，则还有一个属性是以网页的左上角为原点。

MouseEvent.pageX  相对于页面左上角的坐标
MouseEvent.pageY  同上

当使用 addEventListener 方法注册事件侦听器时，它会传递一个 MouseEvent 对象，其中包含有关事件发生的信息，当事件发生并调用事件侦听器时作为参数。引用此 MouseEvnet 对象的属性。下面是点击事件。

<input type="button" value="button" id="xxx">

<script>
function butotnClick(event){
    console.log(event.offsetX);
    console.log(event.offsetY);
}

let button = document.getElementById('xxx');
button.addEventListener('click', butotnClick);
</script>

即使参考坐标，也可以根据您想从原点知道坐标的位置更改要参考的属性。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mybox{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>获取坐标</p>

<div id="mybox"></div>

<script>
function mouseClick(event){
    console.log('offsetX : ' + event.offsetX);
    console.log('offsetY : ' + event.offsetY);
    console.log('clientX : ' + event.clientX);
    console.log('clientY : ' + event.clientY);
    console.log('pageX   : ' + event.pageX);
    console.log('pageY   : ' + event.pageY);
    console.log('screenX : ' + event.screenX);
    console.log('screenY : ' + event.screenY);
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('click', mouseClick);
</script>

</body>
</html>

当鼠标点击屏幕上显示的div元素时，会获取各种坐标并输出到控制台。

键属性

如果在点击或移动鼠标时按下了 Shift或Alt键，则可以通过引用MouseEvnet对象的属性获取。

MouseEvent.altKey    如果按下 Alt 键则为真
MouseEvent.ctrlKey   如果按下 Control 键则为真
MouseEvent.metaKey   如果 Meta 键被按下则为真
MouseEvent.shiftKey  如果按下 Shift 键则为真

※ 在Windows 10环境下，Meta键对应Windows键。

当使用 addEventListener 方法注册事件侦听器时，它会传递一个 MouseEvent 对象，其中包含有关事件发生的信息，当事件发生并调用事件侦听器时作为参数。引用此 MouseEvnet 对象的属性。下面是点击事件。

<input type="button" value="button" id="xxx">

<script>
function butotnClick(event){
    if (event.altKey){
      console.log('Push Alt Key');
    }
}

let button = document.getElementById('xxx');
button.addEventListener('click', butotnClick);
</script>

如果按下多个键，则每个属性都为真。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mybox{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>获取健</p>

<div id="mybox"></div>

<script>
function mouseClick(event){
    if (event.altKey){
      console.log('Push Alt Key');
    }

    if (event.ctrlKey){
      console.log('Push Control Key');
    }

    if (event.metaKey){
      console.log('Push Meta Key');
    }

    if (event.shiftKey){
      console.log('Push Shift Key');
    }
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('click', mouseClick);
</script>

</body>
</html>

当鼠标点击屏幕上显示的div元素时，此时按下的键会输出到控制台。

27-5 keydown 事件，keyup 事件：当按键被按下和释放时

keydown 事件是在按下某个键时触发的事件。keyup 事件是在释放键时触发的事件。您可以为 onkeydown 属性（或 onkeyup 属性）或 onkeydown 属性（或 onkeyup 属性）设置事件处理程序，或者通过将 keydown 或 keyup 指定为 addEventListener 方法的参数来注册事件侦听器。在这里，我们将解释如何使用JavaScript 来描述keydown 事件和keyup 事件发生时的处理。

如何使用 keydown 和 keyup 事件

keydown 事件是在按下某个键时触发的事件。发生在 Element 对象上。

事件类型 : KeyboardEvent
冒泡可用性 : 可能
取消可用性 : 可能

keyup 事件是当键从按下状态释放时发生的事件。发生在 Element 对象上。

事件类型 : KeyboardEvent
冒泡可用性 : 可能
取消可用性 : 可能

使用 onkeydown 和 onkeyup 属性为元素属性值注册事件处理程序。

onkeydown 属性 onkeyup 属性
<textarea id="memo" onkeydown="keyDown()" onkeyup="keyUp()">
</textarea>

<script>
function keyDown(){
    console.log('KeyDown');
}
</script>

<script>
function keyUp(){
    console.log('KeyUp');
}
</script>

使用 onkeydown 和 onkeyup 属性在使用 DOM 检索的元素的属性上注册事件处理程序。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

onkeydown 属性 onkeyup 属性

<textarea id="memo"></textarea>

<script>
function keyDown(){
    console.log('KeyDown');
}

function keyUp(){
    console.log('KeyUp');
}

let textarea = document.getElementById('memo');
textarea.onkeydown = keyDown;
textarea.onkeyup = keyUp;
</script>

使用 addEventListener 方法注册事件侦听器时，将“keydown”或“keyup”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法

<textarea id="memo"></textarea>

<script>
function keyDown(){
    console.log('KeyDown');
}

function keyUp(){
    console.log('KeyUp');
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
textarea.addEventListener('keyup', keyUp);
</script>

当使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于 keydown 和 keyup 事件，将传递一个继承自 Event 对象的 KeyboardEvent 对象。

<textarea id="memo"></textarea>

<script>
function keyDown(event){
    console.log(event);
}

function keyUp(event){
    console.log(event);
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
textarea.addEventListener('keyup', keyUp);
</script>

通过引用在事件处理程序或事件侦听器中传递的 KeyboardEvent 对象的属性，您可以引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#memo{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>你按下了一个键吗？</p>

<textarea id="memo"></textarea>

<script>
function keyDown(event){
    console.log('KeyDown:' + event.key);
}

function keyUp(event){
    console.log('KeyUp');
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
textarea.addEventListener('keyup', keyUp);
</script>

</body>
</html>

如果在焦点位于屏幕上显示的 textarea 元素上时按下某个键，则按下的键的值将输出到控制台。

释放键时输出到控制台。

关于按键事件

类似于 keydown 和 keyup 事件的事件是 keypress 事件。keypress 事件是在按下某个键时发生的事件，但仅在按下字母等用作字母的键时才会发生，即使按下 Shift 键也不会发生该事件。

现在不赞成使用 keepress 事件。我希望您参考下面的详细信息，但它说“以下事件类型已过时，只能由需要与旧版软件兼容的用户代理实施。”

虽然已弃用，但您仍然可以使用它。用法与 keydown 事件几乎相同，通过使用元素的 onkeypress 属性注册事件处理程序或使用 addEventListener 方法注册事件侦听器。

<textarea id="memo"></textarea>

<script>
function keyPress(){
    console.log('keyPress');
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keypress', keyPress);
</script>

27-6 可以通过KeyboardEvent获取的按键信息

当 keydown 或 keyup 事件触发并调用事件处理程序和事件侦听器时，会向它们传递一个 KeyboardEvent 对象，该对象包含有关已触发事件的信息作为参数。KeyboardEvent 对象包含事件发生时按下的键信息。在这里，我们将解释如何获取和使用KeyboardEvent中包含的按键信息。

键属性

KeyboardEvent 对象具有在事件发生时引用键信息的属性。

KeyboardEvent.code   按下的键
KeyboardEvent.key    按下的键代表的字符

KeyboardEvent.code 返回一个字符串，指示按下了哪个键盘键。另一方面，KeyboardEvent.key 返回表示按下的字符的字符串。

让我们用一个打印每个属性值的简单示例来尝试一下。

<textarea id="memo"></textarea>

<script>
function keyDown(event){
    console.log('code:' + event.code + ', key:' + event.key);
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
</script>

看看当您按下键a和按下Shift + a时会发生什么 。

code:KeyA, key:a
code:KeyA, key:A

KeyboardEvent.code 属性返回按下键盘上的哪个键，因此无论是否同时按下Shift键，它都会返回值 KeyA。另一方面，KeyboardEvent.key 属性返回由按下的键的值表示的字符，因此如果同时按下Shift键则返回 A，否则返回 A。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#memo{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>你按下了一个键吗？</p>

<textarea id="memo"></textarea>

<script>
function keyDown(event){
    console.log('code:' + event.code + ', key:' + event.key);
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
</script>

</body>
</html>

当焦点位于 textarea 元素上时按下某个键时，所按下键的 KeyboardEvent.code 和 KeyboardEvent.key 属性的值将打印到控制台。

如果先按 a键。

现在，如果您按Shift + a 。按下 Shift键时也会触发keydown 事件。

按下 Shift 键或 Alt 键时 KeyboardEvent.code 的值

按下Shift或Alt键时也会触发 keydown 和 keyup 事件。这些键可能位于某些键盘的左侧和右侧，并且 KeyboardEvent.code 属性的值可能因按下的键而异。

下面是我在我的环境中实际按下左右键时的结果。

code:ShiftLeft, key:Shift
code:, key:Shift

code:ControlLeft, key:Control
code:ControlRight, key:Control

code:AltLeft, key:Alt
code:AltRight, key:Alt

对于Shift键右侧的键，KeyboardEvent.code 属性的值为空，但对于其他键，KeyboardEvent.code 属性的值根据键是向左按下还是向右按下而变化。无论按下左键还是右键，KeyboardEvent.key 属性的值都是相同的。

是否按下了 Shift 或 Alt 键

如果要确定某个键是用 Shift 键还是 Alt 键按下的，查看 KeyboardEvent 对象的专用属性会很有用。

KeyboardEvent.altKey    如果按下 Alt 键则为真
KeyboardEvent.ctrlKey   如果按下 Control 键则为真
KeyboardEvent.metaKey   如果 Meta 键被按下则为真
KeyboardEvent.shiftKey  如果按下 Shift 键则为真

例如，要确定在 keydown 事件触发时是否按下了Ctrl + c ，您可以这样写：

<textarea id="memo"></textarea>

<script>
function keyDown(event){
    if (event.code == 'KeyC' && event.ctrlKey) {
        console.log('Ctrl + c');
    }
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
</script>

仅当按下Ctrl + c时才输出到控制台 。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#memo{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>你按下[Ctrl + c]或者[Shift + c]键吗？</p>

<script>
function keyDown(event){
    if (event.code == 'KeyC' && event.ctrlKey) {
        console.log('Ctrl + c');
    }

    if (event.code == 'KeyC' && event.shiftKey) {
        console.log('Shift + c');
    }
}

document.addEventListener('keydown', keyDown);
</script>

</body>
</html>

这一次，我们使用文档对象的 addEventListener 方法为 keydown 事件注册一个事件监听器。仅当您按Ctrl + c或Shift + c时才输出到控制台 。

键是否被按住

如果按键被按住，keydown 事件将持续触发。

对于 KeyboardEvent 对象，如果连续按下键，KeyboardEvent.repeat 将返回 true。

KeyboardEvent.repeat   如果键被重复按下 true

比如当keydown事件发生时，可以这样写，防止连续按下按键的处理。

<textarea id="memo"></textarea>

<script>
function keyDown(event){
	if (!event.repeat){
        console.log('KeyDown code:' + event.code);
    }
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
</script>

在这种情况下，第一次按键将打印到控制台，但随后的按键将不会打印到控制台。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#memo{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>[键是否被按住]测试</p>

<textarea id="memo"></textarea>

<script>
function keyDown(event){
	if (!event.repeat){
        console.log('KeyDown code:' + event.code);
    }
}

function keyUp(){
    console.log('KeyUp');
}

let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
textarea.addEventListener('keyup', keyUp);
</script>

</body>
</html>

在 textarea 元素具有焦点时按住某个键会忽略 keydown 事件，但第一次按下除外。

27-7 change 事件：当表单或选择菜单改变时

change 事件是在表单（input 元素）、选择菜单（select 元素）或文本区域（textarea 元素）中通过用户操作更改值时发生的事件。您可以为 onchange 属性或 onchange 属性设置事件处理程序，或者通过将 change 指定为 addEventListener 方法的参数来注册事件侦听器。在这里，我将解释如何使用 JavaScript 描述发生更改事件时的处理。

使用更改事件

change 事件是在表单（input 元素）、选择菜单（select 元素）或文本区域（textarea 元素）中通过用户操作更改值时发生的事件。发生在 HTMLElement 对象上。

事件类型 : Event
冒泡可用性 : 可能
取消可用性 : 不可

使用 onchange 属性为元素属性值注册事件处理程序。

onchange 属性
<label>名称：<input type="text" onchange="inputChange()"></label>

<script>
function inputChange(){
    console.log('Change');
}
</script>

使用 onchange 属性在使用 DOM 检索的元素的属性上注册事件处理程序。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

onchange属性
<label>名称：<input type="text" id="nametext"></label>

<script>
function inputChange(){
    console.log('Change');
}

let text = document.getElementById('nametext');
text.onchange = inputChange;
</script>

使用 addEventListener 方法注册事件侦听器时，将“change”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法

<label>名称：<input type="text" id="nametext"></label>

<script>
function inputChange(){
    console.log('Change');
}

let text = document.getElementById('nametext');
text.addEventListener('change', inputChange);
</script>

当使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于更改事件，将传递一个 Event 对象。

<label>名称：<input type="text" id="nametext"></label>

<script>
function inputChange(event){
    console.log(event);
}

let text = document.getElementById('nametext');
text.addEventListener('change', inputChange);
</script>

通过引用在事件处理程序或事件侦听器中传递的 Event 对象的属性，您可以引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。。</p>

<p>
<label>名称：<input type="text" id="nametext"></label>
</p>

<p>
<label>工作地点：
    <select id="address">
    <option value="">请选择</option>
    <option value="qingdaoshi">青岛市</option>
    <option value="shanghaishi">上海市</option>
    <option value="beijingshi">北京市</option>
    </select>
</label>
</p>

<p>
<input type="radio" id="sales" name="div" value="sales" checked>
<label for="sales">销售</label><br>
<input type="radio" id="develop" name="div" value="develop">
<label for="develop">研发</label><br>
<input type="radio" id="human" name="div" value="human">
<label for="human">人力资源</label><br>
</p>

<script>
function inputChange(event){
    console.log(event.currentTarget.value);
}

let text = document.getElementById('nametext');
text.addEventListener('change', inputChange);

let address = document.getElementById('address');
address.addEventListener('change', inputChange);

let radiosales = document.getElementById('sales');
radiosales.addEventListener('change', inputChange);

let radiodevelop = document.getElementById('develop');
radiodevelop.addEventListener('change', inputChange);

let radiohuman = document.getElementById('human');
radiohuman.addEventListener('change', inputChange);
</script>

</body>
</html>

屏幕上放置了一个文本框、选择菜单和单选按钮。对于每一个，我们为更改事件注册一个事件侦听器，当事件触发时，我们获取生成它的元素的值并将其打印到控制台。

输入字符串后焦点发生变化时，文本框会触发一个更改事件。

当选择与当前值不同的值时，选择菜单会触发更改事件。

当选择与其当前值不同的值时，单选按钮会触发更改事件。

27-8 input事件：当在表单中输入一个字符时

input 事件是在表单（input 元素）或选择菜单（select 元素）中通过用户操作更改值时发生的事件。类似于更改事件，但输入法会在每次键入字符时触发一个事件。您可以为 oninput 属性或 oninput 属性设置事件处理程序，或者通过将输入指定为 addEventListener 方法的参数来注册事件侦听器。在这里，我将解释如何使用JavaScript描述输入事件发生时的处理。

输入事件的使用方法

input 事件是在表单（input 元素）、选择菜单（select 元素）或文本区域（textarea 元素）中通过用户操作更改值时发生的事件。发生在 HTMLElement 对象上。

事件类型 : Event
冒泡可用性 : 可能
取消可用性 : 不可

使用 oninput 属性为元素属性值注册事件处理程序。

oninput 属性

<label>名前：<input type="text" oninput="inputChange()"></label>

<script>
function inputChange(){
    console.log('Change');
}
</script>

使用 oninput 属性在使用 DOM 检索的元素的属性上注册事件处理程序。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

oninput 属性

<label>名前：<input type="text" id="nametext"></label>

<script>
function inputChange(){
    console.log('Change');
}

let text = document.getElementById('nametext');
text.oninput = inputChange;
</script>

使用 addEventListener 方法注册事件侦听器时，将“输入”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法

<label>姓名：<input type="text" id="nametext"></label>

<script>
function inputChange(){
    console.log('Change');
}

let text = document.getElementById('nametext');
text.addEventListener('input', inputChange);
</script>

当您使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于输入事件，将传递一个 InputEvent 对象。

<label>姓名：<input type="text" id="nametext"></label>

<script>
function inputChange(event){
    console.log(event);
}

let text = document.getElementById('nametext');
text.addEventListener('input', inputChange);
</script>

通过引用在事件处理程序或事件侦听器中传递的 InputEvent 对象的属性，您可以引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<p>
<label>姓名：<input type="text" id="nametext"></label>
</p>

<p>
<label>家乡：
    <select id="address">
    <option value="">请选择</option>
    <option value="qingdaoshi">青岛市</option>
    <option value="shanghaishi">上海市</option>
    <option value="beijingshi">北京市</option>
    </select>
</label>
</p>

<p>
<input type="radio" id="sales" name="div" value="economics" checked>
<label for="economics">经济学部</label><br>
<input type="radio" id="develop" name="div" value="education">
<label for="education">教育学部</label><br>
<input type="radio" id="human" name="div" value="engineering ">
<label for="engineering ">理工学部</label><br>
</p>

<script>
function inputChange(event){
    console.log(event.currentTarget.value);
}

let text = document.getElementById('nametext');
text.addEventListener('input', inputChange);

let address = document.getElementById('address');
address.addEventListener('input', inputChange);

let radiosales = document.getElementById('sales');
radiosales.addEventListener('input', inputChange);

let radiodevelop = document.getElementById('develop');
radiodevelop.addEventListener('input', inputChange);

let radiohuman = document.getElementById('human');
radiohuman.addEventListener('input', inputChange);
</script>

</body>
</html>

屏幕上放置了一个文本框、选择菜单和单选按钮。对于每一个，我们为输入事件注册一个事件侦听器，当事件触发时，我们获取生成它的元素的值并将其打印到控制台。

每次输入字符时，文本框都会触发一个输入事件。

当选择与当前值不同的值时，选择菜单会触发一个输入事件。

当选择与当前值不同的值时，单选按钮会触发输入事件。

可以用InputEvent对象获取的输入字符值

当输入事件发生并调用事件处理程序和事件侦听器时，将向它们传递一个 InputEvent 对象，该对象包含有关作为参数发生的事件的信息。InputEvent 对象包含事件发生时按下的键信息。

使用以下属性来引用按下的键信息。

InputEvent.data  代表输入字符的字符串

InputEvent.data 属性返回表示输入字符的字符串。如果删除了字符，则返回 null。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是[InputEvent]的一个示例页面。</p>

<p>
<label>姓名：<input type="text" id="nametext"></label>
</p>

<script>
function inputChange(event){
    console.log(event.data);
}

let text = document.getElementById('nametext');
text.addEventListener('input', inputChange);
</script>

</body>
</html>

当在文本框中输入字符时，从传递给事件监听器的 InputEvent 对象中获取输入字符的值，并输出到控制台。

如果从文本框中删除字符，则获取 null。

27-9 copy,cut,paste：复制、剪切或粘贴时

复制事件是在浏览器上执行复制操作时发生的事件。剪切事件是在浏览器执行剪切操作时发生的事件。另外，粘贴事件是在浏览器上进行粘贴操作时发生的事件。您可以为 oncopy 属性（或 oncut 属性或 onpaste 属性）或 oncopy 属性（或 oncut 属性或 onpaste 属性）设置事件处理程序，或者通过将复制、剪切或粘贴指定为 addEventListener 方法的参数来注册事件侦听器。增加。在这里，我们将解释如何使用JavaScript 来描述发生复制事件、剪切事件或粘贴事件时的处理。

如何使用复制、剪切和粘贴事件

copy复制事件是在浏览器上执行复制操作时发生的事件。事件在 Element 对象上触发。

事件类型: ClipboardEvent
是否冒泡 : 不可
是否可取消 : 不可

cut剪切事件是在浏览器上执行剪切操作时发生的事件。事件在 Element 对象上触发。

事件类型: ClipboardEvent
是否冒泡 : 不可
是否可取消 : 不可

paste 粘贴事件是在浏览器上进行粘贴操作（paste operation）时发生的事件。事件在 Element 对象上触发。

事件类型: ClipboardEvent
是否冒泡 : 不可
是否可取消 : 不可

使用 oncopy、oncut 或 onpaste 属性为元素属性值注册事件处理程序。

oncopy 属性 oncut 属性 onpaste 属性

<textarea oncopy="copy()" oncut="cut()" onpaste="paste()">
</textarea>

<script>
function copy(){
    console.log('Copy');
}
</script>

<script>
function cut(){
    console.log('Cut');
}
</script>

<script>
function paste(){
    console.log('Paste');
}
</script>

使用 oncopy、oncut 或 onpaste 属性在使用 DOM 检索的元素的属性上注册事件处理程序。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

oncopy 属性 oncut 属性 onpaste 属性

<textarea id="memo"></textarea>

<script>
function copy(){
    console.log('Copy');
}

function cut(){
    console.log('Cut');
}

function paste(){
    console.log('Paste');
}

let memoarea = document.getElementById('memo');
memoarea.oncopy = copy;
memoarea.oncut = cut;
memoarea.onpaste = paste;
</script>

使用 addEventListener 方法注册事件侦听器时，指定 ‘copy’ 、 ‘cut’ 或 ‘paste’ 作为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法

<textarea id="memo"></textarea>

<script>
function copy(){
    console.log('Copy');
}

function cut(){
    console.log('Cut');
}

function paste(){
    console.log('Paste');
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

当使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于复制、剪切和粘贴事件，将传递一个继承自 Event 对象的 ClipboardEvent 对象。

<textarea id="memo"></textarea>

<script>
function copy(event){
    console.log(event);
}

function cut(event){
    console.log(event);
}

function paste(event){
    console.log(event);
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

可以通过引用在事件处理程序或事件侦听器中传递的 ClipboardEvent 对象的属性来引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<style type="text/css">
textarea{
width:500px;
height:100px;
}
</style>

</head>
<body>

<p>这是一个[Copy,Cut,Paste]示例页面。。</p>

<textarea id="memo"></textarea>

<script>
function copy(event){
    alert('Copy禁止')
    event.preventDefault();
}

function cut(event){
    alert('Cut禁止')
    event.preventDefault();
}

function paste(event){
    alert('Paste禁止')
    event.preventDefault();
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

</body>
</html>

我对屏幕上显示的 textarea 元素的每个 Copy 、 Cut 和 Paste 操作使用 preventDefault 方法来覆盖默认行为。

如果尝试使用Ctrl + c复制在文本区域中输入的文本 ，则会显示警告“Copy禁止”。

如果尝试使用Ctrl + x剪切在文本区域中输入的文本 ，您将收到“Cut禁止”的警告。

尝试使用 Ctrl+v 将复制到其他地方的文本粘贴到文本区域时，将显示“Paste禁止”警告。

27-10 load事件：加载事件：当页面完成加载时

加载事件是当HTML页面中包含的所有资源（例如图像和样式表）都已加载时发生的事件。您可以为 onload 属性设置事件处理程序，或者通过将 load 指定为 addEventListener 方法的参数来注册事件侦听器。在这里，我将解释如何使用JavaScript描述加载事件发生时的处理。

如何使用load事件

加载事件是当HTML页面中包含的所有资源（例如图像和样式表）都已加载时发生的事件。发生在窗口对象上。

事件类型: Event
是否冒泡 : 不可
是否可取消 : 不可

使用 onload 属性在窗口对象的属性上注册事件处理程序。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。（有关更多信息，请参阅 使用匿名函数和箭头函数编写事件处理程序。）

onload 属性

<script>
function loadFinished(){
    alert('Load');
}

window.onload = loadFinished;
</script>

使用 addEventListener 方法注册事件侦听器时，将“load”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法

<script>
function loadFinished(){
    alert('Load');
}

window.addEventListener('load', loadFinished);
</script>

当您使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于加载事件，将传递一个 Event 对象。

<script>
function loadFinished(event){
    console.log(event);
}

window.addEventListener('load', loadFinished);
</script>

通过引用在事件处理程序或事件侦听器中传递的 Event 对象的属性，您可以引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
#zoo {
    width: 220px;
}
</style>

<script>
function loadFinished(){
    let zooImg = document.getElementById('zoo');
    console.log(zooImg.naturalWidth);
    console.log(zooImg.naturalHeight);
}

window.addEventListener('load', loadFinished);
</script>

</head>
<body>

<p>这是一个[load]示例页面。</p>

<img src="zoo.jpg" id="zoo">

</body>
</html>

访问 HTML 页面后，将触发加载事件，并在页面中包含的所有资源完成加载时调用事件侦听器。当load事件发生时，页面包含的所有图片都已经加载完毕，所以获取图片的宽高信息并输出到控制台。

使用 body 标签的 onload 属性

通过在body标签的onload属性中注册一个事件处理器，当HTML页面的所有资源都加载完成后，就会调用该事件处理器，就像window对象的load事件一样。

onload 属性

<head>
<script>
function loadFinished(){
    alert('Load');
}
</script>
</head>
<body onload = loadFinished()>
・・・
</body>

如果你在window对象的onload属性和body标签的onload属性中都注册了一个事件处理程序，那么只会调用后面注册的事件处理程序，所以这两者在内部被认为是相同的。（与事件监听器不同的是，只能注册一个事件处理器，如果注册了多个，则最后注册的有效）。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<script>
function loadFinished(){
    console.log('Load Finished');
}
</script>

</head>
<body onload="loadFinished()">

<p>这是一个[onload ]示例页面</p>

</body>
</html>

访问 HTML 页面后，当页面中包含的所有资源都已完成加载时，控制台会打印“加载完成”。

DOMContentLoaded 事件和加载事件的区别

与窗口对象的加载事件类似的事件是文档对象的 DOMContentLoaded 事件。

HTML 页面下载完成后，解析 HTML 以创建 DOM 树。此时 DOMContentLoaded 事件被触发。

在 DOMContentLoaded 事件触发后，load 事件在所有 HTML 页面的资源（例如图像和样式表）完成加载时触发。因此，按顺序，加载事件在 DOMContentLoaded 事件之后触发。有时，在 DOMContentLoaded 事件触发时，在加载事件触发之前，使用 DOM 操作元素会更好。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<script>
window.addEventListener('load', function(){
    console.log('Load');
});

document.addEventListener('DOMContentLoaded', function(){
    console.log('DOMContentLoaded');
});
</script>

</head>
<body>

<p>这是一个[DOMContentLoaded]示例页面。</p>

</body>
</html>

它为加载事件注册事件侦听器，为 DOMContentLoaded 事件注册事件侦听器。如果您访问 HTML 页面，您会看到首先触发 DOMContentLoaded 事件，然后是加载事件。

27-11 DOMContentLoaded 事件：DOM 树的构建完成时

DOMContentLoaded 事件在 HTML 页面完成加载、HTML 已被解析并已构建 DOM 树时触发。只有通过使用 DOMContentLoaded 作为 addEventListener 方法的参数注册一个事件侦听器，此事件才可用。在这里，我将解释如何使用 JavaScript 描述 DOMContentLoaded 事件发生时的处理。

使用 DOMContentLoaded 事件

DOMContentLoaded 事件在 HTML 页面完成加载、HTML 已被解析并已构建 DOM 树时触发。发生在文档对象上。

事件类型 : Event
冒泡可能性 : 可能
取消可能性 : 可能

对于 DOMContentLoaded 事件，不能使用 using attributes 或 properties 的方法，需要使用 addEventListener 方法注册事件监听器。将“DOMContentLoaded”指定为 addEventListener 方法的第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法
<script>
function domFinished(){
    alert('DOMContentLoaded');
}

document.addEventListener('DOMContentLoaded', domFinished);
</script>

当使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于加载事件，将传递一个 Event 对象。

<script>
function domFinished(event){
    console.log(event);
}

window.addEventListener('DOMContentLoaded', domFinished);
</script>

通过引用在事件处理程序或事件侦听器中传递的 Event 对象的属性，您可以引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<script>
function domFinished(){
    let element = document.getElementById('xxx');
    element.insertAdjacentHTML('afterend', '<p>DOMContentLoaded</p>');
}

document.addEventListener('DOMContentLoaded', domFinished);
</script>

</head>
<body>

<p id="xxx">这是一个[DOMContentLoaded ]示例页面。</p>

</body>
</html>

当 HTML 页面完成加载且 DOM 树完成时，将触发 DOMContentLoaded 事件并调用事件侦听器。因此，在id属性为xxx的元素节点之后追加由指定为自变量的字符串创建的节点。

※ 除了使用DOMContentLoaded事件外，还有一种方法是在script标签中设置defer属性，作为DOM树完成后执行JavaScript代码的方法。

DOMContentLoaded 事件和加载事件的区别

与文档对象的 DOMContentLoaded 事件类似的事件是窗口对象的加载事件。

HTML 页面下载完成后，解析 HTML 以创建 DOM 树。此时 DOMContentLoaded 事件触发，但此时尚不清楚页面中包含的任何图像或样式表是否已完成加载。当所有资源（例如图像）完成加载时，将触发 load 事件。

您可以在 DOMContentLoaded 事件触发时处理 HTML 页面中包含的元素，但要等到加载事件触发后再处理图像。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<script>
window.addEventListener('load', function(){
    console.log('Load');
});

document.addEventListener('DOMContentLoaded', function(){
    console.log('DOMContentLoaded');
});
</script>

</head>
<body>

<p>这是一个[DOMContentLoaded ]示例页面。</p>

</body>
</html>

它为加载事件注册事件侦听器，为 DOMContentLoaded 事件注册事件侦听器。如果您访问 HTML 页面，您会看到首先触发 DOMContentLoaded 事件，然后是加载事件。

27-12 beforeunload 事件：就在页面被卸载之前

beforeunload 事件是在 HTML 页面从当前页面转换到另一个页面之前触发的事件。由于它在转换之前，您可以显示一个确认对话框并取消页面转换。您可以为 onbeforeunload 属性设置事件处理程序，或者通过将 beforeunload 指定为 addEventListener 方法的参数来注册事件侦听器。在这里，我将解释如何使用JavaScript描述发生beforeunload事件时的处理。

如何使用 beforeunload 事件

beforeunload 事件是在 HTML 页面从当前页面转换到另一个页面之前触发的事件。发生在窗口对象上。

事件类型 : Event
是否冒泡 : 不可
是否可取 : 可能

在稍后解释的事件处理程序或事件监听器中，为了显示一个关于是否真的允许页面转换的确认对话框，在调用事件处理程序或事件监听器时将事件作为参数传递。您可以使用像这样的对象这：

function beforeUnload(event){
    event.preventDefault();
    event.returnValue = 'Check';
}

Event 对象的 preventDefault 方法是取消浏览器默认处理的方法.

在窗口对象的属性上注册事件处理程序时使用 onbeforeunload 属性。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

onbeforeunload 属性

<script>
function beforeUnload(event){
    event.preventDefault();
    event.returnValue = 'Check';
}

window.onbeforeunload = beforeUnload;
</script>

使用 addEventListener 方法注册事件侦听器时，将“beforeunload”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。（有关详细信息，请参阅 使用 addEventListener 方法注册事件侦听器。）

addEventListener 添加事件监听器方法

<script>
function beforeUnload(event){
    event.preventDefault();
    event.returnValue = 'Check';
}

window.addEventListener('beforeunload ', beforeUnload);
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<script>
window.addEventListener('beforeunload', function(event){
    let check = document.getElementById('save');
    if (!check.checked) {
        event.preventDefault();
        event.returnValue = 'Check';
    }
});
</script>

</head>
<body>

<p id="xxx"><a href="https://www.flashyonder.com/">Go to[www.flashyonder.com]</a></p>

<label for="save"><input type="checkbox" id="save">Save</label>

</body>
</html>

如果您尝试通过单击页面上显示的链接移动到另一个页面，而页面上显示的复选框未被选中，将显示一个确认对话框。

单击取消按钮取消页面转换并返回到原始屏幕。

如果单击不是取消的按钮，页面将转移到链接目标。

27-13 resize事件：窗口大小改变时

调整大小事件是在调整浏览器窗口大小时触发的事件。您可以为 onresize 属性设置事件处理程序，或者通过将 resize 指定为 addEventListener 方法的参数来注册事件侦听器。在这里，我将解释如何使用 JavaScript 描述发生调整大小事件时的处理。

resize如何使用调整大小事件

调整大小事件是在调整显示页面的浏览器窗口大小时触发的事件。发生在窗口对象上。

事件类型 : UIEvent
是否冒泡 : 不可
是否可取 : 不可

在为 window 对象的属性注册事件处理程序时使用 onresize 属性。如果使用属性，也可以使用匿名函数或箭头函数表达式来编写它们。

onresize 属性
<script>
function resizeWindow(){
    console.log('Resize');
}

window.onresize = resizeWindow;
</script>

使用 addEventListener 方法注册事件侦听器时，将“resize”指定为第一个参数。如果使用 addEventListener 方法，也可以使用匿名函数或箭头函数表达式来编写。

addEventListener 添加事件监听器方法

<script>
function resizeWindow(){
    console.log('Resize');
}

window.addEventListener('resize', resizeWindow);
</script>

当您使用元素的属性注册事件处理程序时，或者当您使用 addEventListener 方法注册事件侦听器时，当事件发生并调用事件处理程序或事件侦听器时，有关发生的事件的信息将作为argument. 你将被传递一个可以使用的 Event 对象。对于加载事件，传递一个 UIEvent 对象。

<script>
function resizeWindow(event){
    console.log(event);
}

window.addEventListener('resize', resizeWindow);
</script>

通过引用在事件处理程序或事件侦听器中传递的 Event 对象的属性，您可以引用有关发生的事件的信息。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>调整窗口大小</p>

<p id="wsize">width</p>
<p id="hsize">height</p>

<script>
function resizeWindow(event){
    pw.innerText = 'width:' + window.innerWidth + 'px';
    ph.innerText = 'height:' + window.innerHeight + 'px';
}

let pw = document.getElementById('wsize');
let ph = document.getElementById('hsize');

pw.innerText = 'width:' + window.innerWidth + 'px';
ph.innerText = 'height:' + window.innerHeight + 'px';

window.addEventListener('resize', resizeWindow);
</script>

</body>
</html>

每次调整窗口大小，都会产生一个resize事件，获取改变后的窗口大小，并为页面中放置的p元素显示窗口的宽高。

使用 body 标签的 onresize 属性

通过在body标签的onresize属性中注册一个事件处理器，当窗口改变大小时会调用事件处理器，就像window对象的resize事件一样。

onresize 属性

<head>
<script>
function resizeWindow(){
    console.log('Resize');
}
</script>
</head>
<body onresize = resizeWindow()>
・・・
</body>

如果同时为window对象的onresize属性和body标签的onresize属性都注册了事件处理器，那么只会调用后面注册的事件处理器，所以这两者在内部被认为是相同的。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<script>
function resizeWindow(){
    let pw = document.getElementById('wsize');
    let ph = document.getElementById('hsize');

    pw.innerText = 'width:' + window.innerWidth + 'px';
    ph.innerText = 'height:' + window.innerHeight + 'px';
}
</script>

</head>
<body onresize = resizeWindow()>

<p>调整窗口大小</p>

<p id="wsize">width</p>
<p id="hsize">height</p>

</body>
</html>

每次调整窗口大小，都会产生一个resize事件，获取改变后的窗口大小，并为页面中放置的p元素显示窗口的宽高。

关联内容

JavaScript
第二章将JavaScript写到HTML编码中
JavaScript
第一章 在浏览器中启用 JavaScript
JavaScript
第三章 JavaScript 基础知识
JavaScript
第四章 JavaScript的数值
JavaScript
第五章 長整数
JavaScript
第六章 字符串的基础