JS事件入门教程：轻松掌握网页交互-原创手记-慕课网

概述

本文详细介绍JS事件的概念和作用，通过监听和响应用户操作，JavaScript可以增强网页的交互性。文章中列举了多种常见的JS事件类型，如鼠标事件、键盘事件、窗口事件等，并讲解了如何使用HTML属性和JavaScript函数来绑定事件。此外，还讨论了事件冒泡和如何阻止默认行为。

JS事件简介

什么是JS事件

JS事件指的是网页中发生的各种用户操作或系统事件。当用户与网页进行交互，如点击按钮、移动鼠标等，或者当浏览器对某些情况做出响应时，如页面加载完成，都会触发相应的事件。浏览器会将这些事件传递给JavaScript引擎，从而触发事件处理函数的执行。

JS事件的作用

JS事件的作用在于增强网页的交互性。通过监听并响应事件，可以为用户提供更加丰富和动态的体验。例如，响应用户点击按钮、输入文本、滚动页面等操作，可以实现动态刷新内容、弹出提示信息、导航页面等功能，极大提升了网页的功能性和用户体验。

常见JS事件类型

鼠标事件
- click：用户点击元素
- mousemove：用户移动鼠标
- mouseup：用户释放鼠标按钮
- mousedown：用户按下鼠标按钮
键盘事件
- keydown：用户按下键盘上的键
- keyup：用户释放键盘上的键
- keypress：用户按下键盘上的键（少用，已被废弃）
窗口事件
- resize：用户调整浏览器窗口大小
- scroll：用户滚动页面
表单事件
- focus：元素获得焦点
- blur：元素失去焦点
- change：用户改变元素内容
- submit：用户提交表单
页面加载事件
- load：页面加载完毕
- DOMContentLoaded：DOM加载完毕
触摸事件
- touchstart：用户触摸屏幕
- touchmove：用户在屏幕上移动
- touchend：用户从屏幕上移开手指

通过这些事件，开发人员可以捕捉和响应用户与网页的各种互动行为。

如何绑定事件

使用HTML属性绑定事件

在HTML中，可以通过直接在元素上添加事件属性的方式来绑定事件处理函数。当用户触发该元素上的事件时，相应的函数就会被调用。

例如，下面的代码中，点击按钮会触发一个简单的警告框：

<button onclick="alert('Hello, World!')">点击我</button>

使用JavaScript函数绑定事件

除了使用HTML属性绑定事件外，还可以使用JavaScript代码动态地绑定事件。这种方式提供了更大的灵活性，特别是在处理动态生成的元素或需要更复杂逻辑的情况下。

例如，下面的代码中，一个按钮元素被创建，并为其添加了一个点击事件处理函数：

// 创建一个按钮元素
var button = document.createElement('button');
button.innerHTML = '点击我';

// 为按钮添加点击事件处理函数
button.addEventListener('click', function() {
    alert('Hello, World!');
});

// 将按钮添加到页面上
document.body.appendChild(button);

实现一个简单的按钮点击事件

下面是一个简单的案例，演示如何在用户点击一个按钮时显示一个警告框。整个过程中，从创建按钮到绑定事件处理函数，再到显示警告框的步骤都会详细展示。

HTML部分

<button id="myButton">点击我</button>

JavaScript部分

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Hello, World!');
});

这段代码首先获取了页面上的一个按钮元素，然后为其添加了点击事件处理函数。当用户点击按钮时，将弹出一个警告框显示“Hello, World!”。

事件处理函数

创建简单的事件处理函数

事件处理函数是一个在浏览器触发特定事件时执行的函数。可以通过多种方式定义这些函数，常见的有直接赋值给元素的属性或使用addEventListener方法。

例如，下面的代码中定义了一个简单的函数sayHello，并在按钮点击时调用：

// 定义事件处理函数
function sayHello() {
    alert('Hello, World!');
}

// 获取按钮元素
var button = document.getElementById('myButton');

// 为按钮绑定点击事件
button.addEventListener('click', sayHello);

使用匿名函数作为事件处理函数

除了使用命名函数外，还可以使用匿名函数直接作为事件处理函数。这样可以使得代码更加简洁，特别是当事件处理函数只需要执行一次或是在某些特定情况下使用时。

例如，下面的代码中使用了一个匿名函数来处理按钮的点击事件：

var button = document.getElementById('myButton');

button.addEventListener('click', function() {
    alert('Hello, World!');
});

事件流与冒泡

事件冒泡的概念

事件冒泡是指当一个元素接收到事件时，该事件会沿着DOM树向上传播，直到最顶层的document。这意味着，如果一个元素的某个父元素上也绑定了相同的事件处理函数，那么点击子元素时，父元素的事件处理函数也会被调用。

例如，假设一个按钮位于一个div元素内部，并且该div元素和按钮都绑定了点击事件处理函数：

<div id="parent">
    <button id="child">点击我</button>
</div>

var parent = document.getElementById('parent');
var child = document.getElementById('child');

parent.addEventListener('click', function(event) {
    console.log('parent clicked');
    // 阻止事件冒泡
    event.stopPropagation();
});

child.addEventListener('click', function() {
    console.log('child clicked');
});

当点击child按钮时，控制台会依次打印“child clicked”，但由于调用了event.stopPropagation()，“parent clicked”不会被打印。

如何阻止事件冒泡

有时候，我们希望阻止事件冒泡，以防止父元素或更高层级的元素接收到事件。这可以通过在事件处理函数中调用event.stopPropagation()方法实现。

例如，修改上面的代码，使其阻止冒泡：

<div id="parent">
    <button id="child">点击我</button>
</div>

var parent = document.getElementById('parent');
var child = document.getElementById('child');

parent.addEventListener('click', function(event) {
    console.log('parent clicked');
    // 阻止事件冒泡
    event.stopPropagation();
});

child.addEventListener('click', function() {
    console.log('child clicked');
});

此时，点击child按钮时，只会打印“child clicked”，而不会打印“parent clicked”。

防止事件默认行为

什么是默认行为

默认行为指的是浏览器在某些事件发生时自动执行的操作。例如，点击链接会跳转到链接指向的页面；提交表单会发送请求到服务器等。

如何阻止默认行为

要阻止事件的默认行为，可以使用event.preventDefault()方法。该方法可以阻止浏览器执行默认操作，从而实现自定义的行为。

例如，下面的代码中，阻止了表单的默认提交行为，从而在页面上显示一个警告：

HTML部分

<form id="myForm">
    <input type="text" name="username">
    <button type="submit">提交</button>
</form>

JavaScript部分

var form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
    // 显示警告信息
    alert('表单提交被阻止');
    // 阻止默认行为
    event.preventDefault();
});

实际案例演练

实现一个简单的按钮点击事件

HTML部分

<button id="myButton">点击我</button>

JavaScript部分

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Hello, World!');
});

这段代码首先获取了页面上的一个按钮元素，然后为其添加了点击事件处理函数。当用户点击按钮时，将弹出一个警告框显示“Hello, World!”。

实现页面加载事件

下面的案例展示了如何在页面加载完成后执行某些操作。例如，可以加载一些初始数据，或者进行一些页面初始化设置。

HTML部分

<!DOCTYPE html>
<html>
<head>
    <title>页面加载事件示例</title>
</head>
<body>
    <div id="content">加载中...</div>
</body>
</html>

JavaScript部分

window.addEventListener('load', function() {
    var content = document.getElementById('content');
    content.innerHTML = '页面已加载完成';
});

这段代码首先添加了一个页面加载事件处理函数，当整个页面加载完成后，会将content元素的内容更改为“页面已加载完成”。