使用 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 的元素新增一個事件偵聽器。