在 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参数 - 使用不显眼的 JavaScript
- 使用
&&和||运营商
将函数作为值传递给 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');
}
}
输出：
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
评论
- 所有网络浏览器和大多数 HTML 元素都支持使用
onclick执行多个功能。它是一种简洁明了的多函数调用方法。 - 函数执行是顺序的。因此，你可以通过相应地列出函数来规划方法调用的顺序。
- 除了在一个函数名后使用分号，我们还可以用逗号分隔它们。这意味着
onclick = "function1(), function2()"也是一个有效的语法。 - 使用传递给
onclick事件的多个函数有一个缺点。如果作为参数传递的任何方法由于某些异常而失败，则会破坏整个链。并且它后面的所有函数都不会被执行。 - 在标签中使用
onclick使代码可读。我们不操纵 DOM 不操纵。这意味着我们在 HTML 中静态指定函数。因此，我们不会在运行时向 DOM 元素的onclick事件添加任何function。浏览器解析 HTML，可以在解析阶段关联点击事件。
使用不显眼的 JavaScript
在 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
评论
- 功能按顺序执行但不相关。因此，如果一个函数无法执行，其余的函数不会像
onclick="functionA(), functionB()"中的情况那样被阻止。 - 我们可以使用此方法添加多个功能。要动态删除已添加的函数，我们需要使用
removeEventListener。语法如下。
element.removeEventListener('click', alertFirst);
- 调试功能会很困难，因为 HTML 不会显示与 HTML 元素的
onclick链接的功能。在编译 javascript 代码时，这些方法会在运行时映射到onclick事件。 - 这种在运行时添加
onclick的方法可以灵活地根据业务逻辑巧妙地执行功能，因为关联是在运行时的编译阶段完成的。
使用 && 和 ||运营商
一个可以包含由&&和||分隔的多个函数运营商。这些函数应该有一个布尔返回类型。通常，当需要决定某些条件然后执行预期功能时，我们会使用这种方法。如果这些条件需要复杂或冗长的逻辑检查，最好将它们创建为函数并将它们保存在 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
}
在上面的代码中，只有在 isValidPage() 函数返回 true 后才会调用 fetchPageDetails() 函数。本质上，&& 操作符确保 fetchPageDetails() 函数仅在 pagenumber 有效时执行。
评论
- 在这种方法中，函数的执行是顺序的。它遵循使用
&&和||的代码作为逻辑运营商。如果一个方法由于异常而失败，那么它不会执行剩余的函数。 - 如果函数具有布尔返回类型或与代码中使用的逻辑运算符匹配的类型，我们可以使用此方法。
- 由于我们在 HTML 元素的 click 属性中指定了函数，因此该方法是声明多个函数的静态方式。我们不进行任何运行时关联。