onclickイベント
例
ボタンがクリックされたときにJavaScriptを実行します。
<button onclick="myFunction()">Click me</button>
定義と使用法
この onclickイベントは、ユーザーが要素をクリックしたときに発生します。
HTMLの場合：
<element onclick="myScript">
JavaScriptの場合：
object.onclick = function(){myScript};
JavaScriptでは、addEventListener（）メソッドを使用します。
object.addEventListener("click", myScript);
技術的な詳細
| 泡： | はい |
|---|---|
| キャンセル可能： | はい |
| イベントタイプ： | MouseEvent |
| サポートされている HTMLタグ： |
すべて例外：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>、および<title> |
その他の例
<ボタン>をクリックして日付を表示します。
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
<h3>要素をクリックして、テキストの色を変更します。
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
要素の色を変更する方法の別の例：
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
クリックして、ある入力フィールドから別の入力フィールドにテキストをコピーします。
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
「onclick」イベントをウィンドウオブジェクトに割り当てる方法：
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
onclickを使用してドロップダウンを作成します。
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
関連ページ
JavaScriptチュートリアル：JavaScriptイベント
HTML DOMリファレンス：ondblclickイベント
HTML DOMリファレンス：onmousedownイベント
HTML DOMリファレンス：onmouseupイベント
ブラウザのサポート
onclickDOMレベル2（2001）の機能です。
すべてのブラウザで完全にサポートされています。
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |