使用 onclick 事件调用 JavaScript 函数
-
使用
onclick事件处理程序调用 JavaScript 函数 - 使用纯 JavaScript 将 JavaScript 函数附加到 HTML 元素
-
在 HTML 元素中的
onclick事件处理程序上定义函数 -
使用
addEventListener调用 JavaScript 函数
即使我们为网页设计静态 HTML 内容，我们也可能希望使其具有用户交互性。默认情况下，HTML 元素是愚蠢的。<a> 标签是用户交互的，但主要用于加载特定路径。像 div 这样的 HTML 元素可以通过向它们添加事件处理程序来实现用户交互。我们将讨论一种称为 onclick 事件处理程序的此类事件处理程序。有几种方法可以将其添加到 HTML 元素中。
使用 onclick 事件处理程序调用 JavaScript 函数
我们可以使用 HTML 中的 onclick 事件处理程序或在 JavaScript 中附加事件处理程序，将 JavaScript 函数绑定到 div。让我们参考以下代码，其中我们将事件处理程序附加到 div 元素。
<div id="interactive-div" onclick="changeMyColor('interactive-div')" style="cursor: pointer;">Click me</div>
function changeMyColor(id) {
var el = document.getElementById(id);
el.style.color = 'blue';
}
div 元素默认不接受任何点击事件。在代码中，我们将 JavaScript 函数 changeMyColor() 绑定到 div 的 onclick 事件处理程序。它现在使 div 可点击。即使我们为 div 定义了 onclick 事件处理程序，用户仍然不知道 div 是否接受点击，除非他点击。一旦用户将鼠标悬停在我们的目标 div 上，将光标标记为不同的 UI/UX 是一个很好的 UI/UX。为此，我们将内联样式 style="cursor: pointer;" 分配给 div 元素。一旦用户将鼠标悬停在 div 上，光标将显示一个手势，表明它可以点击。
function changeMyColor(id) {
var el = document.getElementById(id);
el.style.color = 'blue';
}
在 JavaScript 代码中，我们定义了传递给 div 的 onclick 事件的函数 changeMyColor()。该函数将 div 的 id 作为参数。它使用 document.getElementById(id) 选择元素，并使用 el.style.color = "blue"; 行将元素的字体颜色更改为 blue。因此，我们为 div 分配了一个 JavaScript 函数并使其可点击。
使用纯 JavaScript 将 JavaScript 函数附加到 HTML 元素
在最后一种方法中，我们在 HTML 中声明了 onclick 事件处理程序。有一种方法可以保持 HTML 干净，并将 JavaScript 函数附加到 div 或相应的 HTML 元素，而无需在 HTML 中指定任何 onclick 事件处理程序。在这里，我们在 JavaScript 中分配 click 事件，而不是使用 HTML。因此，这种方法纯粹基于 JavaScript 并保持 HTML 干净。这种编程风格称为 Unobtrusive JavaScript。参考下面的代码可以更好地理解这个概念。
<div id="interactive-div" style="cursor: pointer;">Click me</div>
window.onload =
function() {
var el = document.getElementById('interactive-div');
el.onclick = changeMyColor;
}
function changeMyColor() {
var el = document.getElementById('interactive-div');
el.style.color = 'blue';
}
参考上面的代码，我们保留了与前面的代码示例类似的 HTML。我们没有在 HTML 中添加任何 onclick 事件处理程序。相反，我们在 JavaScript 中定义了 onclick 事件处理程序，并在 JavaScript 代码中附加了相同的函数 changeMyColor。这里有几点需要注意：
- 我们在
window.onload中附加了onclick事件侦听器。如果我们不使用window.onload方法，它会抛出一个错误，提示Uncaught TypeError: Cannot set property 'onclick' of null。发生这种情况是因为document.getElementById("interactive-div")尝试在加载 HTML 时查询具有idinteractive-div的元素。由于<script>标签位于<head>部分，JavaScript 代码会在实际加载驻留在<body>标签中的div之前执行<script>标签内容。因此，getElementById()函数将找不到该元素并返回null。因此它会抛出一个错误，说它不能将onclick设置为 null。 - 另一点需要注意的是，我们将函数分配给
onclick事件处理程序，而没有括号()。如果我们写el.onclick = changeMyColor();而不是el.onclick = changeMyColor;，它将在加载 HTML 时执行函数，这不是我们想要的。因此，我们将changeMyColor的函数引用传递给onclick事件处理程序。一旦用户通过点击div触发onclick事件，函数调用changeMyColor就会发生。div变成蓝色。
在 HTML 元素中的 onclick 事件处理程序上定义函数
还有一些方法可以在 onclick 事件上调用 JavaScript 函数。我们可以在 HTML 中定义该方法。但这不是推荐的方式，因为它会使 HTML 变得不整洁。参考以下代码更好理解。
<div onclick="(function() { alert('hello there'); })()" style="cursor: pointer;">click me!</div>
单击 div，上面的代码将弹出 hello world 文本。在这里，我们在 HTML 中对函数定义进行了内联编码。它是一种匿名内联方法。我们不能在其他地方使用相同的函数，因为它没有关联的名称。较长的函数定义会很麻烦，并且会使代码可读性变差。
使用 addEventListener 调用 JavaScript 函数
添加 onclick 事件处理程序的一种方法是使用 .onclick() 函数。还有另一种更通用的方法，可用于添加更多事件侦听器。为此，我们使用 JavaScript 的 .addEventListener() 函数。此函数可用于 element、document 界面甚至是 window 对象。我们可以使用 .addEventListener() 函数在触发特定 event 时设置方法调用。
- 参数：它需要几个强制参数：事件的类型，例如
click等，以及listener函数。listener函数在事件触发时执行。 - 用法：参考以下代码。
<div style="cursor: pointer;" id="interactive-div">click me!</div>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('interactive-div')
.addEventListener('click', function() {
alert('hello');
});
});
这种编码风格是纯粹基于 JavaScript 的非侵入式 JavaScript 编程。在这里，我们使用 .addEventListener() 函数添加了 click 侦听器，为此，我们必须确保 .getElementById("interactive-div") 返回元素。因此，我们将代码包装在 document 界面的 DOMContentLoaded 事件侦听器中。否则，代码将抛出一个错误，指出它不能将 event 添加到 null 对象。