JavaScript第五讲：事件，条件循环语句，错误处理

星途码客

已于 2024-06-01 22:45:21 修改

阅读量1.2k

点赞数 24

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端

于 2024-06-01 22:44:26 首次发布

本文链接：https://blog.csdn.net/2303_80856850/article/details/139380698

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

前言

在编程的世界里，事件、条件和循环语句、以及错误处理是构建任何复杂程序或应用的基石。无论是开发一个简单的网页交互，还是构建一个庞大的企业级系统，这些基础概念都扮演着至关重要的角色。今天星途将通过这篇文章，分别深入探讨“事件”、“条件语句”、“循环语句”、“错误处理”的核心概念、应用场景以及实践技巧，帮助大家更好地理解和掌握这些基础知识。若是有学过的大佬们可以收藏当作笔记看。

事件

在JavaScript中，"事件"是用户或浏览器与页面交互时触发的动作。这些动作可以是点击按钮、移动鼠标、提交表单、加载页面等。为了响应这些事件，JavaScript提供了事件处理程序（或称为事件监听器）。下面，我将从多个常见方面详细解释JavaScript中的事件，并配合代码进行演示。

1. 事件类型

JavaScript支持许多类型的事件，包括但不限于：

click: 用户点击元素时触发。
mouseover 和 mouseout: 用户移动鼠标进入或离开元素时触发。
keydown、keyup 和 keypress: 用户按下、释放或按住键盘键时触发。
load: 页面或图片等资源加载完成时触发。
submit: 表单提交时触发。

2. 事件监听器

可以通过addEventListener()方法为元素添加事件监听器。这个方法接受两个参数：要监听的事件类型和一个事件处理函数。

示例：当用户点击一个按钮时，显示一个警告框。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>事件示例</title>  
</head>  
<body>  
    <button id="myButton">点击我</button>  
  
    <script>  
        // 获取按钮元素  
        var btn = document.getElementById('myButton');  
  
        // 添加点击事件监听器  
        btn.addEventListener('click', function() {  
            alert('按钮被点击了！');  
        });  
    </script>  
</body>  
</html>

3. 事件冒泡和捕获

事件传播包括三个阶段：捕获阶段、目标阶段和冒泡阶段。默认情况下，事件监听器在冒泡阶段触发。但你可以通过设置addEventListener()的第三个参数为true来在捕获阶段触发监听器。

示例：演示事件冒泡

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>事件冒泡示例</title>  
</head>  
<body>  
    <div id="outer" style="padding: 50px; border: 1px solid black;">  
        外层div  
        <div id="inner" style="padding: 50px; border: 1px solid red;">  
            内层div  
        </div>  
    </div>  
  
    <script>  
        var outer = document.getElementById('outer');  
        var inner = document.getElementById('inner');  
  
        outer.addEventListener('click', function(event) {  
            console.log('外层div被点击了');  
        }, false); // 默认为false，即冒泡阶段  
  
        inner.addEventListener('click', function(event) {  
            console.log('内层div被点击了');  
            // 阻止事件冒泡到外层div  
            // event.stopPropagation();  
        }, false);  
    </script>  
</body>  
</html>

4. 事件对象

当事件触发时，会传递一个事件对象作为参数给事件处理函数。这个对象包含了与该事件有关的所有信息，如触发事件的元素、鼠标位置、键盘按键等。

示例：获取鼠标在元素上点击时的位置。

btn.addEventListener('click', function(event) {  
    console.log('鼠标X坐标：', event.clientX);  
    console.log('鼠标Y坐标：', event.clientY);  
});

5. 移除事件监听器

使用removeEventListener()方法可以移除之前添加的事件监听器。这个方法需要两个参数：要移除的事件类型和事件处理函数。

示例：

function handleClick() {  
    alert('按钮被点击了！');  
    // 移除事件监听器  
    btn.removeEventListener('click', handleClick);  
}  
  
btn.addEventListener('click', handleClick);

注意：在removeEventListener()中，事件处理函数必须是与添加时相同的引用。如果是匿名函数，则无法移除。

条件语句

1. 条件成立时执行

当条件成立（即条件为true）时，执行相应的代码块。这通常使用if语句来实现。

let x = 10;  
  
if (x > 5) {  
    console.log("x 大于 5");  
}  
// 输出: x 大于 5

2. 条件不成立时执行

如果if语句中的条件不成立（即条件为false），并且你希望在这种情况下执行一些代码，你可以使用else语句。

let y = 3;  
  
if (y > 5) {  
    console.log("y 大于 5");  
} else {  
    console.log("y 不大于 5");  
}  
// 输出: y 不大于 5

3. 多条件判断 - else if

当你有多个条件需要判断时，可以使用else if语句。else if语句允许你指定另一个条件，并在第一个if语句的条件为false时检查这个条件。

let z = 7;  
  
if (z < 5) {  
    console.log("z 小于 5");  
} else if (z === 5) {  
    console.log("z 等于 5");  
} else {  
    console.log("z 大于 5");  
}  
// 输出: z 大于 5

4. 多条件判断 - switch

switch语句是另一种处理多条件判断的方法。它根据表达式的值选择执行哪个代码块。

let fruit = "apple";  
  
switch (fruit) {  
    case "banana":  
        console.log("我喜欢香蕉");  
        break;  
    case "apple":  
        console.log("我喜欢苹果");  
        break;  
    case "orange":  
        console.log("我喜欢橙子");  
        break;  
    default:  
        console.log("我不确定这是什么水果");  
}  
// 输出: 我喜欢苹果

在switch语句中，每个case值都会与表达式的值进行比较。如果找到匹配的case，就会执行相应的代码块，直到遇到break语句（如果没有break，会执行所有后续的case，直到遇到break或switch语句结束）。如果表达式的值与任何case都不匹配，就会执行default代码块（如果存在的话）。

注意：在switch语句中，case的值必须是常量表达式，不能是变量或复杂的表达式。同时，尽管JavaScript会尝试将case的值和表达式的值转换为相同的类型进行比较，但最好还是保持它们类型一致以避免潜在的问题。

循环语句

1. for 循环语句

for循环是最常用的循环语句之一，它会在指定的次数内重复执行代码块。

for (let i = 0; i < 5; i++) {  
    console.log(i); // 输出 0, 1, 2, 3, 4  
}

2. while 循环语句

while循环会在指定的条件为true时重复执行代码块。

let i = 0;  
while (i < 5) {  
    console.log(i); // 输出 0, 1, 2, 3, 4  
    i++;  
}

3. do...while 循环语句，至少执行一次

do...while循环与while循环类似，但不同之处在于它会先执行一次代码块，然后再检查条件。因此，无论条件是否为true，代码块至少会执行一次。

let i = 0;  
do {  
    console.log(i); // 输出 0, 1, 2, 3, 4  
    i++;  
} while (i < 5);

4. 增强型循环语句（for...of, for...in）

for...of 循环用于遍历可迭代对象（如数组、Map、Set等）的元素。

let array = [1, 2, 3, 4, 5];  
for (let value of array) {  
    console.log(value); // 输出 1, 2, 3, 4, 5  
}

for...in 循环用于遍历对象的可枚举属性（包括原型链上的属性）。

let obj = { a: 1, b: 2, c: 3 };  
for (let key in obj) {  
    console.log(key); // 输出 "a", "b", "c"（可能还包括原型链上的属性）  
}  
  
// 注意：使用for...in时，通常建议检查对象自身属性，而非原型链上的属性  
for (let key in obj) {  
    if (obj.hasOwnProperty(key)) {  
        console.log(key); // 输出 "a", "b", "c"  
    }  
}

5. 继续下一次循环（continue）

在循环中使用continue语句会跳过当前迭代，继续下一次迭代。

for (let i = 0; i < 10; i++) {  
    if (i % 2 === 0) {  
        continue; // 跳过偶数  
    }  
    console.log(i); // 输出 1, 3, 5, 7, 9  
}

6. 终止循环（break）

在循环中使用break语句会立即终止循环。

for (let i = 0; i < 10; i++) {  
    if (i === 5) {  
        break; // 当i等于5时，终止循环  
    }  
    console.log(i); // 输出 0, 1, 2, 3, 4  
}

错误处理

当在JavaScript中编程时，错误处理是非常重要的一部分。以下是从您提到的两个方面（调用不存在的函数和try...catch）详细解释JavaScript错误处理。

1. 调用不存在的函数

当您尝试调用一个不存在的函数时，JavaScript会抛出一个错误，通常是ReferenceError。这个错误告诉您正在尝试访问一个未定义的变量。

示例代码：

// 假设我们没有定义这个函数  
functionDoesNotExist(); // 这里会抛出 ReferenceError  
  
// 为了处理这种错误，我们通常会在调用函数之前检查它是否存在  
if (typeof functionDoesNotExist === 'function') {  
    functionDoesNotExist();  
} else {  
    console.error('函数 functionDoesNotExist 不存在');  
}

但是，这种检查方法在实际编程中并不常见，因为通常我们知道哪些函数是存在的。如果您收到关于不存在的函数的错误，那通常是因为您可能拼写错误，或者忘记定义该函数。

2. try...catch

try...catch语句用于捕获和处理JavaScript中的运行时错误。当try块中的代码抛出错误时，控制流会立即转移到catch块，在那里您可以处理错误。

示例代码：

try {  
    // 尝试执行可能会出错的代码  
    let x = y; // y 没有定义，这将抛出 ReferenceError  
} catch (error) {  
    // 当 try 块中的代码抛出错误时，这里会捕获并处理错误  
    console.error('捕获到错误:', error);  
}  
  
// 程序会继续执行 catch 块之后的代码  
console.log('程序继续执行');

在上面的例子中，我们尝试访问一个未定义的变量y，这将导致ReferenceError。但是，由于我们使用了try...catch语句，这个错误被捕获并打印到控制台，而不是导致整个程序崩溃。

try...catch语句也可以与finally块一起使用，无论是否发生错误，finally块中的代码都会执行。这通常用于执行清理操作，如关闭文件或释放资源。

try {  
    // 尝试执行可能会出错的代码  
    let x = y; // y 没有定义，这将抛出 ReferenceError  
} catch (error) {  
    // 当 try 块中的代码抛出错误时，这里会捕获并处理错误  
    console.error('捕获到错误:', error);  
} finally {  
    // 无论是否发生错误，这里的代码都会执行  
    console.log('finally 块中的代码');  
}