Programming/JavaScript
[JavaScript] DOM: Event
Isaac S. Lee
2023. 10. 10. 16:56
🍁Event
기본 코드
<!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 조작</h1>
<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<hr>
<div id="div1"></div>
<script>
document.getElementById('btn1').addEventListener('click', m1);
document.getElementById('btn2').addEventListener('click', m2);
document.getElementById('btn3').addEventListener('click', m3);
var div1 = document.getElementById('div1');
</script>
</body>
</html>
BOM
btn1.onclick = 함수;//btn1.onclick = 함수;
btn1.onclick = m1;
btn1.onclick = m2; //덮어쓰기
function m1() {
alert('BOM');
}
이벤트 제거
btn2.onclick = m2;
function m2() {
btn1.onclick = null; //이벤트 제거
}BOM에서 이벤트를 제거할 때에는 null을 적용하며, 새로운 이벤트를 적용하면 덮어쓰기가 된다.
DOM
btn2.addEventListener(이벤트종류, 함수);btn2.addEventListener('click', m3);
function m3() {
alert('DOM');
}DOM에서는 이벤트 종류와 함수를 인자로 받는다.
이벤트를 BOM 방식으로 건다고 해서 크게 불편함이 있는 것은 아니지만 DOM 방식으로 거는 게 좋다.
가끔은 회사에서 BOM 방식을 사용하지 말고 DOM 방식으로 사용하라고 하는 경우도 있다.
이벤트 제거
btn2.addEventListener('click', m4);
function m4() {
btn2.removeEventListener('click', m3);
}DOM 방식에서 이벤트를 제거할 때에는 removeEventListener를 사용한다.
add를 하면 모두 누적이 되기 때문에 하나의 이벤트에 여러 함수가 동시에 등록되며, 이벤트 다중 목록을 관리할 수 있는 addEventListener를 지원한다.
