[Javascript] eventListener()

eventListener

▼eventListenerは、イベント発生時に処理を担当する関数です。

イベントリスナーの登録

作成されたイベントリスナーは、呼び出される前にオブジェクトまたは要素に登録する必要があります.

1.Propertyとしてイベントターゲットとなるオブジェクトまたは要素に登録

✓JavaScriptコードにPropertyとして登録

window.onload = function() {                    // HTML 문서가 로드될 때 실행됨.
    var text = document.getElementById("text"); // 아이디가 "text"인 요소를 선택
    text.innerHTML = "HTML 문서가 로드되었습니다.";
}

✓HTMLタグに属性として登録

<p onclick="alert('문자열을 클릭했어요!')">이 문자열을 클릭해 보세요!</p>

🚨 JavaScriptコードをHTMLコードに追加することはお勧めしません.これは可読性が高く、メンテナンスが難しいからです.

2.イベントリスナーをオブジェクトまたは要素に渡す方法

✓addEventListener()方法el.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)

イベント名:登録するイベントリスナーのイベントタイプを文字列

に変換

を実行するイベントリスナー:指定されたイベントが発生したときに実行するイベントリスナー

を転送する.

イベント伝播方式:虚偽バブル(bubbling)方式で伝播し、真実捕獲(capture)方式でイベント

を伝播する.

var showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.
showBtn.addEventListener("click", showText);  // 선택한 요소에 click 이벤트 리스너를 등록함.

function showText() {
    document.getElementById("text").innerHTML = "텍스트가 나타났어요!!";
}

✓ attachEvent()

3.複数のイベントリスナーの登録

addEventListener()メソッドの使用

var btn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.

btn.addEventListener("click", clickBtn); // 선택한 요소에 click 이벤트 리스너를 등록함.
btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 리스너를 등록함.
btn.addEventListener("mouseout", mouseoutBtn); // 선택한 요소에 mouseout 이벤트 리스너를 등록함.

function clickBtn() {
    document.getElementById("text").innerHTML = "버튼이 클릭됐어요!";
}

function mouseoverBtn() {
    document.getElementById("text").innerHTML = "버튼 위에 마우스가 있네요!";
}

function mouseoutBtn() {
    document.getElementById("text").innerHTML = "버튼 밖으로 마우스가 나갔어요!";
}

イベントリスナーの削除

removeEventListener()で削除

function clickBtn() {

    btn.removeEventListener("mouseover", mouseoverBtn);

    btn.removeEventListener("mouseout", mouseoutBtn);

    document.getElementById("text").innerHTML = "이벤트 리스너가 삭제되었어요!";

}