在 Onclick 事件中调用多个 JavaScript 函数
我们非常熟悉 javascript 中的 onclick 事件，它会触发某个函数作为值传递给 onclick 属性。几乎所有 HTML 元素都支持 HTML 的 文档对象模型 (DOM) 事件，除了像 <br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。它通常用于 html 标签，如 <div>、<button>、<li>、<span>、<a> 等。但是我们如何在一个标签上调用多个函数？单击 <div>、<li> 或 <button>。以下是一些方法。
使用 onclick 属性的最常见方法是将函数作为值分配给 onclick。我们通常在 HTML 标签内的 GUI 代码中编写它。要将多个函数作为值传递，请在该标签的 onclick 属性中以分号分隔列出它们。它的语法如下。
onclick = "functionA(); functionB();"
这两个功能将一个接一个地执行。例如，如果我们将以下代码与函数 functionA() 和 functionB() 一起使用，结果将是按照值中提到的顺序依次执行这两个函数。
<div id="output" onclick="functionA(); functionB();"></div>
function functionA() {
for (let i=0; i<5; i++) {
console.log(i + " Mars is a planet");
}
}
function functionB() {
for (let i=0; i<5; i++) {
console.log(i + " The sky is blue");
}
}
输出：
0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue
在 JavaScript 中的 onclick 中传递函数的另一种方法是在 JavaScript 代码中添加 onclick 侦听器。在这个方法中，我们找到目标元素并将我们的函数链接到该元素的 onclick 事件。unobtrusive 方法是一种编程方式，我们将 javascript 事件保存在 js 代码中，而 HTML 仅包含静态页面（参考此处了解更多信息）。以下是在点击事件上调用多个函数的不显眼的方式。
let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);
输出：
0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue
element.removeEventListener('click', alertFirst);
一个可以包含由&&和||分隔的多个函数运营商。这些函数应该有一个布尔返回类型。通常，当需要决定某些条件然后执行预期功能时，我们会使用这种方法。如果这些条件需要复杂或冗长的逻辑检查，最好将它们创建为函数并将它们保存在 js 代码中，以使 HTML 简洁易读。下面的代码详细说明了使用。
<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>
function isValidPage(pageNumber) {
let pageNum = parseInt(pageNumber);
let maxPagesCount = 10;
let isValidPageNumber = false;
if (!isNaN(pageNum)) {
if (pageNum > 1 && pageNum < maxPagesCount) {
isValidPageNumber = true;
}
}
return isValidPageNumber;
}
function fetchPageDetails(pageNumber) {
// 调用后端服务以获取详细信息
}
在上面的代码中，只有在 isValidPage() 函数返回 true 后才会调用 fetchPageDetails() 函数。本质上，&& 操作符确保 fetchPageDetails() 函数仅在 pagenumber 有效时执行。
相关文章
在 Angular 中上传文件
发布时间：2023/04/14 浏览次数：71 分类：Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间：2023/04/14 浏览次数：91 分类：Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间：2023/04/14 浏览次数：139 分类：Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间：2023/04/14 浏览次数：142 分类：Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间：2023/04/14 浏览次数：150 分类：Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间：2023/04/14 浏览次数：107 分类：Angular
-
我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间：2023/04/14 浏览次数：104 分类：Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。
