[JavaScript] 이벤트 핸들러 등록하기

1. onclick 프로퍼티 활용

 

새로운 이벤트를 할당하게 되면, 기존의 값을 덮어쓰기 때문에 좋은 방법이라고 하기 어렵다.

let btn = document.querySelector('#myBtn');

btn.onclick = function () {
  console.log('Hi Codeit!');
};

 

---

 

2. addEventListener 메소드 사용

 

첫번째 파라미터로 event 내용을 전달하고, 두번째 파라미터로 이벤트 핸들러를 전달한다. 핸들러 부분에는 함수이름 만 전달해주면 됨.

event1() 이런식으로 작성하는 경우가 있는데, 그러면 함수가 바로 실행된다.

하나의 요소에 여러가지 독립적인 이벤트를 등록할 수 있음.

let btn = document.querySelector('#myBtn');

function event1() {
	console.log('Hi Codeit!');
}

function event2() {
	console.log('Hi again!');
}

// elem.addEventListener(event, handler)
btn.addEventListener('click', event1);
btn.addEventListener('click', event2);

 

---

 

3. removeEventListener 메소드로 이벤트 삭제

 

반드시 외부에 함수 이름을 만들어서 handler 에 함수이름을 전달하는 방식으로 삭제해야 함.

// elem.removeEventListener(event, handler)
btn.removeEventListener('click', event2);