我们非常熟悉
onclickjavascript中的事件，它触发某个函数作为值传递给onclick属性。Document Object Model几乎所有的 HTML 元素都支持 HTML的(DOM) 事件，除了少数几个像<br>,<head>,<html>,<iframe>,<meta>,<param>,<script>,<style>或<title>. 它通常用于 html 标签，如<div>,<button>,<li>,<span>等。但是我们如何在单击 a或 a时<a>调用多个函数。以下是一些这样做的方法。<div><li><button>
- 将函数作为值传递给
onclick参数 - 使用不显眼的 JavaScript
- 使用
&&和||运算符
目录
1. 将函数作为值传给onclick参数
2.使用不显眼的JavaScript
3.使用&&和| |运算符
1.将函数作为值传给onclick函数
使用属性的最常见方法
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");
}
}输出：
1.
onclick所有 Web 浏览器和大多数 HTML 元素都支持执行多个功能。它是一种简洁明了的多函数调用方法
2.函数执行是顺序的。因此，您可以通过相应地列出函数来规划方法调用的顺序。
3.我们也可以用逗号分隔它们，而不是在一个函数名称后使用分号。这意味着这
onclick = "function1(), function2()"也是一个有效的语法。
4.
onclick使用传递给事件的多个函数有一个缺点。如果作为参数传递的任何方法由于某些异常而失败，它会破坏整个链。并且它后面的所有函数都不会被执行。
5.使用
onclickin 标签使代码可读。我们不操纵 DOM 也不操纵。这意味着我们在 HTML 中静态指定函数。因此，我们不会onclick在运行时向 DOM 元素的事件添加任何函数。浏览器解析 HTML 并可以在解析阶段关联点击事件。
2.使用不显眼的JavaScript
在 JavaScript中传递函数的另一种方法是在 JavaScript 代码
onclick中添加onclick侦听器。在此方法中，我们找到目标元素并将我们的函数链接到该onclick元素的事件。不显眼的方法是一种编程方式，我们将 javascript 事件保存在 js 代码中，而 HTML 仅包含静态页面。以下是在点击事件上调用多个函数的不显眼的方式。
let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);输出：
1. 函数按顺序执行，但不依赖。因此，如果一个函数执行失败，其余的函数不会像 中的情况那样被阻塞
onclick="functionA(), functionB()"。2.我们可以使用此方法添加多个功能。要动态删除已添加的功能，我们需要使用
removeEventListener. 语法如下。element.removeEventListener('click', alertFirst);
3. 很难调试功能，因为 HTML 不会显示与
onclickHTML 元素链接的功能。onclick在编译 javascript 代码时，这些方法会在运行时映射到事件。4.这种
onclick在运行时添加的方法提供了基于业务逻辑智能地执行功能的灵活性，因为关联是在运行时的编译阶段完成的。
3.使用&&和| |运算符
&&一个可以包括由and运算符分隔的多个函数||。这些函数应该有一个布尔返回类型。通常，当需要确定某些条件然后执行预期的功能时，我们会使用这种方法。如果这些条件需要复杂或冗长的逻辑检查，最好将它们创建为函数并将它们保存在 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) {
// Call Backend service to get the detils
}在上面的代码中，函数只有在函数返回fetchPageDetails()后才会被调用。本质上，运算符确保仅当有效时才执行该函数。isValidPage()true&&fetchPageDetails()pagenumber
1.在这种方法中，函数的执行是顺序的。它遵循使用&&和||运算符的代码逻辑。如果一个方法由于异常而失败，那么它不会执行剩余的函数。
2.如果我们的函数具有布尔返回类型或与代码中使用的逻辑运算符匹配的类型，我们可以使用此方法。
3.由于我们在 HTML 元素的 click 属性中指定函数，所以该方法是声明多个函数的静态方式。我们不进行任何运行时关联。
