[JavaScript] 이벤트 리스너 종류

 

 

 

이벤트리스너

웹 페이지의 상호 작용을 처리할 수 있게 해 줌

 

특정 사용자 행동에 응답하는 역할

 

---

 

// 버튼 클릭 시 메시지 출력
function showMessage() {
    alert('안녕하세요!');
}


// 웹 페이지 로딩 시 실행
window.onload = function() {
    // 버튼에 이벤트 리스너 추가
    var button = document.getElementById('myButton');
    button.addEventListener('click', showMessage);
};

 

 

Click 이벤트 리스너

사용자가 요소를 클릭할 때 발생

element.addEventListener('click', function() {...});

 

 

 

Change 이벤트 리스너

입력 필드나 선택 상자 등의 값이 변경될 때 발생

element.addEventListener('change', function() {...});

 

 

 

Submit 이벤트 리스너

폼을 제출할 때 발생

formElement.addEventListener('submit', function() {...});

 

 

 

 

Keydown, Keyup, Keypress 이벤트 리스너

키보드 키가 눌리거나 떼어질 때 발생

document.addEventListener('keydown', function(event) {...});

 

 

 

Mouseover, Mouseout 이벤트 리스너

마우스 커서가 요소 위에 올라가거나 빠져나갈 때 발생

element.addEventListener('mouseover', function() {...});

 

 

 

Focus, Blur 이벤트 리스너

요소가 포커스를 얻거나 잃을 때 발생

inputElement.addEventListener('focus', function() {...});

 

 

 

Resize 이벤트 리스너

브라우저 창의 크기가 변경될 때 발생

element.addEventListener('click', function() {...});

 

 

 

Scroll 이벤트 리스너

스크롤이 발생할 때 발생

window.addEventListener('scroll', function() {...});

 

 

 

Load 이벤트 리스너

웹 페이지 또는 이미지 등이 로드될 때 발생

window.addEventListener('load', function() {...});