使用 JavaScript 设置 onclick
- 什么是 JavaScript 中的事件和事件监听器
-
在 JavaScript 中向元素添加
onClick事件侦听器 -
在 JavaScript 中如何将元素的引用传递给
onClick事件侦听器 -
在 JavaScript 中如何将
onClick事件监听器添加到 Jquery
在本教程中，我们将讨论如何使用 JavaScript 将 onClick 侦听器附加到元素；我们会讨论：
- 什么是 JavaScript 中的 Event 和 EventListener 或 EventHandler
- 如何向元素添加
onClick事件监听器 - 如何传递对
onClickEventListener 的引用 - 如何使用 Jquery 添加
onClick事件监听器
什么是 JavaScript 中的事件和事件监听器
事件是浏览器或最终用户所做的事情。这些事件可以由称为事件处理程序或事件侦听器的 JavaScript 概念处理。事件侦听器在特定事件发生时执行。
onClick 是这些事件监听器之一。onClick 事件侦听器在用户单击元素时触发/执行。
在 JavaScript 中向元素添加 onClick 事件侦听器
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor()">
Change Color to Red
</div>
<script>
function ChangeColor() {
document.getElementById("textElement").style.color = "red";
}
</script>
</body>
</html>
上面的代码将触发/执行 ChangeColor 方法，该方法将使用 Document 对象模型访问元素，ID 为 textElement 并将其文本颜色更改为红色。
请注意，onClick 被设置为 HTML 中类似于 class、id 等元素的属性。
或者，你可以直接使用 JavaScript 设置元素的属性 onClick。
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
document.getElementById("textElement").onclick = function() {
document.getElementById("textElement").style.color = "red";
};
</script>
</body>
</html>
这将访问 textElement 并为其分配一个 function；当用户点击 HTML 元素时，这个 function 将执行，结果将是相似的。例如，具有 id 为 textElement 的元素的颜色将更改为红色。
此外，你可以使用 JavaScript 元素的 addEventListener 方法/函数来执行相同的功能。
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
let element = document.getElementById("textElement");
element.addEventListener("click", function(){
element.style.color = "red";
});
</script>
</body>
</html>
addEventListener 有两个参数；第一个是要在 HTML 元素上侦听的事件类型，第二个是在某个事件发生时执行的回调函数。
如果你使用的是 Internet Explorer，由于兼容性问题，addEventListener 将不起作用。我们将不得不使用 attachEvent 使用回退来复制这种行为。
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
let element = document.getElementById("textElement");
if(element.addEventListener){
element.addEventListener('click', function(){
element.style.color = "red";
});
}else if(element.attachEvent){
element.attachEvent('onclick', function(){
element.style.color = "red";
});
}
</script>
</body>
</html>
在 JavaScript 中如何将元素的引用传递给 onClick 事件侦听器
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor(this,'red')">
Change Color to passed Color
</div>
<script>
function ChangeColor(element,color) {
element.style.color = color;
}
</script>
</body>
</html>
在这个例子中，我们传递了两个参数，this 和 red，this 将一个 DOM 元素的引用传递给函数，而 red 只是一个字符串。
你可以注意到，只需更改第二个参数，我们就可以更改元素的颜色。与其他方法相比，这种方法提高了可重用性。例如，我们可以对多个元素使用 ChangeColor 方法。
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor(this,'red')">
Change Color to Red
</div>
<div id="textElement" onclick="ChangeColor(this,'blue')">
Change Color to Blue
</div>
<script>
function ChangeColor(element,color) {
element.style.color = color;
}
</script>
</body>
</html>
在 JavaScript 中如何将 onClick 事件监听器添加到 Jquery
如果你不使用 Vanilla JavaScript，而是使用 Jquery（一个 JavaScript 库）之类的东西，则过程类似；唯一的区别是语法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#textElement").click(function(){
$(this).css('color','red')
});
});
</script>
</head>
<body>
<div id="textElement">Change Color to Red</p>
</body>
</html>
一旦文档加载，它将向具有 textElement 的 id 的元素添加一个事件侦听器。