JavaScript で onClick を設定する
- JavaScript のイベントと EventListener とは何ですか
-
JavaScript の要素に
onClickEventListener を追加する方法 -
JavaScript で要素の参照を
onClickEventListener に渡す方法 -
JavaScript で
onClickEventListener を Jquery に追加する方法
このチュートリアルでは、JavaScript を使用して onClick リスナーを要素にアタッチする方法について説明します。私たちは議論する予定です：
- JavaScript のイベントおよび EventListener または EventHandler とは何ですか
onClickEventListener を要素に追加する方法onClickEventListener への参照を渡す方法- Jquery を使用して
onClickEventListener を追加する方法
JavaScript のイベントと EventListener とは何ですか
イベントは、ブラウザまたはエンドユーザーが行うことです。これらのイベントは、イベントハンドラーまたはイベントリスナーと呼ばれる JavaScript の概念で処理できます。イベントリスナーは、特定のイベントが発生したときに実行されます。
onClick はこれらのイベントリスナーの 1つです。onClick イベントリスナーは、ユーザーが要素をクリックしたときにトリガー/実行します。
JavaScript の要素に onClick EventListener を追加する方法
<!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 は、class、id などと同様に HTML の要素のプロパティとして設定されていることに注意してください。
または、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 にアクセスして関数が割り当てられます。この関数は、ユーザーが HTML 要素をクリックすると実行され、結果は同様になります。たとえば、textElement の id を持つ要素の色は赤に変更されます。
さらに、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 は 2つの引数を取ります。1つ目は HTML 要素でリッスンするイベントのタイプであり、2つ目は特定のイベントが発生したときに実行されるコールバック関数です。
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 EventListener に渡す方法
<!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 の 2つの引数を渡します。this は DOM 要素への参照を関数に渡しますが、red は単なる文字列です。
2 番目の引数を変更するだけで、要素の色を変更できることがわかります。このアプローチは、他のアプローチと比較して再利用性を向上させます。たとえば、複数の要素で 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 EventListener を Jquery に追加する方法
Vanilla JavaScript を使用していないが、JavaScript ライブラリである Jquery のようなものを使用している場合、プロセスは同様です。唯一の違いは構文です。
<!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 を持つ要素にイベントリスナーが追加されます。