[Javascript] eventListener()

eventListener

✏️ eventListener란 이벤트가 발생했을 때 그 처리를 담당하는 함수이다.

이벤트 리스너 등록

작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다.

1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법

✓ 자바스크립트 코드에서 프로퍼티로 등록

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

✓ HTML 태그에 속성으로 등록

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

🚨 HTML 코드에 자바스크립트 코드가 추가됨으로써 가독성이 안 좋아지며, 유지보수도 힘들어지기 때문에 권장하지 않음!

2. 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법

✓ addEventListener() 메소드 사용

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

1. 이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달
2. 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달
3. 이벤트 전파 방식 : false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파

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 = "이벤트 리스너가 삭제되었어요!";

}