• インラインイベントハンドラーを使う
• DOMのイベントリスナーを使う
• addEventListenerを使う
• イベントオブジェクトを利用する
• イベントリスナーを削除する
• 複数のイベントを設定する
• イベント委譲を使う

インラインイベントハンドラーを使う

HTMLのタグの属性に直接JavaScriptのコードを書く方法です。

<button onclick="alert('ボタンがクリックされました！')">クリック</button>

クリック

DOMのイベントリスナーを使う

JavaScriptのスクリプト内で、ボタン要素に対して直接関数を指定する方法です。

<button id="myButton">クリック</button>
<script>
    document.getElementById("myButton").onclick = function() {
        alert('ボタンがクリックされました！');
    };
</script>

クリック

addEventListenerを使う

addEventListenerメソッドを使ってイベントを設定する方法です。

<button id="eventButton">クリック</button>
<script>
    document.getElementById("eventButton").addEventListener("click", function() {
        alert('addEventListenerでイベントを設定しました！');
    });
</script>

クリック

イベントオブジェクトを利用する

イベントハンドラー内でeventオブジェクトを利用する方法です。

<button id="eventObjButton">クリック</button>
<script>
    document.getElementById("eventObjButton").addEventListener("click", function(event) {
        console.log("クリックされた要素:", event.target);
    });
</script>

クリック

イベントリスナーを削除する

removeEventListenerを使ってイベントを削除する方法です。

<button id="removeButton">イベントを削除</button>
<script>
    function clickHandler() {
        alert('このイベントは削除されます');
    }
    let button = document.getElementById("removeButton");
    button.addEventListener("click", clickHandler);
    setTimeout(() => {
        button.removeEventListener("click", clickHandler);
    }, 5000);
</script>

イベントを削除

複数のイベントを設定する

同じ要素に対して複数のイベントを登録する方法です。

<button id="multiEventButton">複数のイベント</button>
<script>
    let multiButton = document.getElementById("multiEventButton");
    multiButton.addEventListener("click", () => alert("クリックされました！"));
    multiButton.addEventListener("mouseover", () => console.log("マウスオーバーしました！"));
</script>

複数のイベント

イベント委譲を使う

親要素にイベントを設定し、子要素のクリックを検出する方法です。

<div id="parent">
    <button class="child">ボタン1</button>
    <button class="child">ボタン2</button>
</div>
<script>
    document.getElementById("parent").addEventListener("click", function(event) {
        if (event.target.classList.contains("child")) {
            alert(event.target.innerText + "がクリックされました！");
        }
    });
</script>