JavaScript 核取方塊 onChange
Anika Tabassum Era
2023年1月30日
2022年5月10日
-
在 JavaScript 中使用
onChange
作為核取方塊的屬性 -
在 Checkbox 上使用
onChange
作為 JavaScript 屬性 -
在 JavaScript 中將
addEventListener
用於onChange
JavaScript 的 onChange
事件側重於更改元素的值。當執行特定事件時,它會被觸發並返回一些偏好。
onchange
事件在元素失去焦點後立即生效。它在單擊後立即觸發,onClick
和 onChange
之間的區別很微妙。
我們將討論 onChange
最常用的方法作為 HTML 屬性、JavaScript 屬性和事件偵聽器。
在 JavaScript 中使用 onChange
作為核取方塊的屬性
onchange
屬性是指帶有程式碼主體的 JavaScript 函式來觸發系統。這裡的例項有一個核取方塊,選中後,它將執行一個描述更改的函式。
程式碼片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<label>
<input type="checkbox" onchange="Check(this)" /> CHECK as onchange attribute
</label>
<p id="verdict"></p>
<script>
function Check(value) {
document.getElementById('verdict').innerHTML = value.checked;
};
</script>
</body>
</html>
輸出:
關鍵字 this
指的是一個全域性物件,onChange
屬性抓取並觸發 Check
函式。value.checked
根據切換狀態在 HTML 正文中返回布林輸出。
在 Checkbox 上使用 onChange
作為 JavaScript 屬性
在這種情況下,我們宣告一個引用特定 id = "check"
的物件。之後,我們將呼叫 object.onchange
屬性來初始化一個在切換時執行的函式。
程式碼片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<label>
<input type="checkbox" id="check" /> CHECK for oncheck property
</label>
<p id="verdict"></p>
<script>
var y = document.getElementById('check');
y.onchange = function(value){
document.getElementById('verdict').innerHTML = y.checked;
};
</script>
</body>
</html>
輸出:
為了編碼方便,鍵入 function(value)
;即使你不新增 value
作為引數,它也具有相同的結果。
在 JavaScript 中將 addEventListener
用於 onChange
addEventListener
有一個 change
事件,在焦點更改之前不會觸發。主要操作呼叫事件偵聽器
並啟用更改
事件。失去焦點時會產生其他函式程式碼。
程式碼片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<label>
<input type="checkbox" id="check" /> CHECK for addEventListener
</label>
<p id="verdict"></p>
<script>
var y = document.getElementById('check');
y.addEventListener('change', function(){
document.getElementById('verdict').innerHTML = y.checked;
});
</script>
</body>
</html>
輸出:
宣告物件,並呼叫 addEventListener
以繼續處理另一個函式體。
Author: Anika Tabassum Era