JAVASCRIPT STEP 37 - EVENT(Dom ver)

★ EVENT

• BOM 방식

//BOM 이벤트
window.document.all.btn1.onclick = function() {
    alert('BOM');
};

• DOM 방식

//DOM 이벤트
document.getElementById('btn2').addEventListener('click', function() {
    alert('DOM');
});

 

■ BOM과 DOM의 차이

• 1. BOM은 이벤트 매핑을 관리 X, DOB 이벤트 매핑을 관리 O

const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');

//BOM은 이벤트 매핑을 관리 할 수 없다.
btn1.onclick = m1;
btn1.onclick = m2; //덮어쓰기

//DOM은 이벤트 매핑을 관리 할 수 있다. > Invocation List(이벤트 함수 목록)
btn2.addEventListener('click', m1);
btn2.addEventListener('click', m2);

function m1() {
    alert('m1');
}


function m2() {
    alert('m2');
}

• 이벤트 제거

//BOM 방식
btn1.onclick = null; //이벤트 제거

//DOM 방식
btn2.removeEventListener('click', m1); //골라서 제거 가능