最終更新日：
公開日：
レシピ
イベント
クリックしたときに処理を実行する
特定の要素をクリックしたら指定した処理を実行する方法について解説します。
この記事のポイント
- 特定のHTML要素がクリックされたら処理を実行するように設定
- スマホやタブレットなどのタッチ端末のタップへも対応
目次
HTML要素がクリックされたら処理を実行する
ページにある特定のHTML要素がクリックされたら指定した処理を実行するようには、HTML要素に対してイベントリスナー「click」と処理する内容を指定します。
コードは次のようになります。
コード例
<!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(){〜}の無名関数の形式で処理内容を書く以外にも、次のようにメソッド名を指定することもできます。
コード例
window.addEventListener('load', function(){
document.getElementById("button1").addEventListener('click', sayHello);
});
function sayHello() {
alert("Hello");
}パソコンなどマウスを使う場合はクリックに反応しますが、スマホやタブレットなどのタッチ端末ではタップに反応します。
イベントリスナーを1回のみ設定する
イベントリスナーは何回クリックしても有効ですが、オプション設定で処理を1回だけにすることが可能です。
指定方法は以下のように配列形式で、イベントリスナーの第3引数に指定します。
コード例
window.addEventListener('load', function(){
let option = {
once: true
};
document.getElementById("button1").addEventListener('click', sayHello, option);
});
function sayHello() {
alert("Hello");
}このコードを実行すると、ボタンは1回目のクリックには反応しますが2回目以降は反応しません。
onceをtrueにすると、１回のみ反応する指定にすることができます。
初期値はfalseで何回でも反応するようになっています。
こちらの記事は役に立ちましたか？
コメントありがとうございます！
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。