WEB/JavaScript
[JavaScript] DOM - event 등록 및 삭제
developer of the night sky
2023. 10. 10. 16:20
DOM에서 Invocation List를 통해 이벤트 메소드 관리를 한다.
🔻이벤트 등록🔻
element.addEventListener(event, function);
🔻이벤트 삭제🔻
element.removeEventListener(event, function);🔻등록 및 삭제🔻
기본 뼈대
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>DOM event</h1>
<input type="button" value="버튼(BOM)" id="btn1">
<input type="button" value="버튼(DOM)" id="btn2">
</body>
</html>
BOM 방법
<script>
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.onclick = m1;
btn1.onclick = m3;
function m1() {
alert('m1');
}
function m3() {
alert('m3');
}
btn2.onclick = m2;
function m2() {
btn1.onclick = null; //작동 중지
}
</script>onclick 으로 등록하고 null를 대입하여 이벤트을 중지시킨다.
그리고 동일한 버튼에 다른 이벤트가 걸려있으면 코딩 순서에 따라 맨 뒤에 있는 이벤트만 실행된다.
(btn1.onclick 에 대해 m3만 실행된다.)
DOM 방법
<script>
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', m4);
btn2.addEventListener('click', m5);
btn1.removeEventListener('click', m4);
function m4() {
alert('m4');
}
function m5() {
alert('m5')
}
</script>addEventListener로 등록하고 removeEventListener로 이벤트를 중지시킨다.
그리고 동일한 버튼에 다른 이벤트가 걸려있으면 코딩 순서에 따라 앞 이벤트부터 실행된다.
(btn2.onclick 에 대해 m4,m5가 순서대로 실행된다.)