HTML要素がクリックされたら処理を実行する
ページにある特定のHTML要素がクリックされたら指定した処理を実行するようには、HTML要素に対してイベントリスナー「click」と処理する内容を指定します。
コードは次のようになります。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
document.getElementById("button1").addEventListener('click', function(){
alert("Hello");
});
});
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">クリック！</button>
</body>
</html>上記のコードではid属性「button1」を持つ<button id="button1">クリック！</button>に対し、addEventListenerメソッドでクリックのイベントリスナーと処理内容を設定しています。
今回のようにfunction(){〜}の無名関数の形式で処理内容を書く以外にも、次のようにメソッド名を指定することもできます。
JavaScript コード例
window.addEventListener('load', function(){
document.getElementById("button1").addEventListener('click', sayHello);
});
function sayHello() {
alert("Hello");
}パソコンなどマウスを使う場合はクリックに反応しますが、スマホやタブレットなどのタッチ端末ではタップに反応します。
イベントリスナーを1回のみ設定する
イベントリスナーは何回クリックしても有効ですが、オプション設定で処理を1回だけにすることが可能です。
指定方法は以下のように配列形式で、イベントリスナーの第3引数に指定します。
JavaScript コード例
window.addEventListener('load', function(){
let option = {
once: true
};
document.getElementById("button1").addEventListener('click', sayHello, option);
});
function sayHello() {
alert("Hello");
}このコードを実行すると、ボタンは1回目のクリックには反応しますが2回目以降は反応しません。
onceをtrueにすると、１回のみ反応する指定にすることができます。
初期値はfalseで何回でも反応するようになっています。