✔️이벤트 등록하기

// 이벤트 등록하기
let btn = document.querySelector('#myBtn');

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

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

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

✔️elem.addEventListener(event, handler): 이벤트 핸들러 등록할 때 가장 권장되는 방법.

첫번째 파라미터로 이벤트 타입 문자열로 전달하고, 두번째 파라미터로 이벤트 핸들러를 전달한다.

btn.addEventListener('click', event1);
btn.addEventListener('click', event2);
//하나의 요소에 여러개의 독립적인 이벤트 핸들러를 등록할 수 있다.

✔️elem.removeEventListener(event, handler): 이벤트 핸들러 삭제됨.

event2는 등록됐다가 삭제되었기 때문에 event1만 동작함.
❗❗반드시 등록할 때 사용했던 핸들러를 그.대.로 전달해야함. 이벤트 핸들러를 삭제해야하면 반드시 이벤트를 등록할 때 외부에 함수를 만들어서 해당 함수의 이름으로 핸들러를 전달해줘야함
핸들러를 전달하는 부분에서 함수를 바로 작성할수도 있는데 event1() 이렇게 작성해버리면 모양은 똑같지만 서로 다른 함수이기 때문에 이벤트 핸들러가 정상적으로 삭제되지 않음.

btn.removeEventListener('click', event2);

✔️이벤트 객체(Event Object)

const myInput = document.querySelector('#myInput');
const myBtn = document.querySelector('#myBtn');

                    //event대신에 알파벳 e만 쓰기도 함.
function printEvent(event) {  //이벤트 핸들러가 되는 함수의 첫번째 파라미터는 무조건 이벤트 객체가 전달.
  console.log(event);
	event.target.style.color = 'red';//문자열 전부 빨간색
}

myInput.addEventListener('keydown', printEvent);
myBtn.addEventListener('click', printEvent);