• eventHandler 함수를 만들고, eventHandler의 첫번째 인자를 사용할 줄 안다.
• event.preventDefault

---

이벤트 Event

이벤트는 무언가 일어났다는 신호 !
예를 들면, 사용자가 클릭했을 때, 스크롤을 했을 때, 필드의 내용을 바꾸었을 때와 같은 것을 의미.
모든 DOM 노드는 이런 신호를 만들어 낸다.
+ 이벤트는 DOM에만 한정되진 않는다.

자주 사용되는 유용한 DOM 이벤트

• click : 객체를 클릭한 경우
• dblclick : 더블 클릭한 경우
• blur : 객체에 focus가 벗어날 경우
• focus : 객체에 focus가 되었을 경우
• change : 객체의 내용이 바뀌고 focus를 잃었을 경우
• select : select option 등 객체를 선택할 경우
• load : 문서나 객체가 로딩 되었을 경우
• mouseover : 커서가 객체 위로 올라왔을 경우
• mouseout : 커서가 객체 밖으로 나간 경우
• submit : <form>을 제출할 때 발생
• keyup : 키보드 키를 눌렀다 뗀 경우
• keydown : 키보드 키를 누를 경우
• error : 에러가 발생한 경우
• scroll : 스크롤 바를 조작하는 경우

event handler

이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러 handler를 할당해야 한다.
핸들러는 사용자의 행동에 어떻게 반응할 지를 자바스크립트 코드로 표현한 것 !
핸들러는 여러 가지 방법으로 할당할 수 있다.

onclick="..."

<button type="button" onclick="alert('클릭!')">submit</button>

버튼을 클릭하면 onclick 안의 코드가 실행된다.
인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다.
하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할 수는 없다.

DOM 프로퍼티 리스너

이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식.
HTML과 javascript를 분리할 수 있다는 점에서 선호되는 방식이지만,
addEventListener를 사용하자.

<button type="button" id="btn">submit</button>
<script>
  btn.onclick = function () {
  	alert('클릭!');
  };
</script>

자주 하는 실수

1.

<!----- 올바른 방법 ----->
button.onclick = sayHello;

// 틀린 방법
button.onclick = sayHello();

sayHello()같이 괄호를 덧붙이는 것은 함수를 호출하겠다는 것을 의미한다.
sayHello()를 프로퍼티에 할당하면 함수 호출의 결과값(result)이 할당이 된다.
함수 sayHello가 아무 것도 반환하지 않는다면 onclick 프로퍼티엔 undefined이 할당되므로 이벤트가 원하는 대로 동작하지 않는다.

2.
DOM 프로퍼티는 대,소문자를 구분한다.
핸들러 할당할 시 btn.onclick은 가능하지만, btn.ONCLICK / btn.onClick은 안된다.

3.
setAttribute로 핸들러를 할당하지 말자.

// body 클릭하면 에러 발생 !
// 속성은 항상 문자열이기 때문에 , 함수가 문자열이 되어버린다.
document.body.setAttribute('onclick', function() { alert(1) });

addEventListener

addEventListener은 이벤트를 등록하는 가장 권장되는 방식.
여러 개의 이벤트 핸들러를 등록할 수 있다.

element.addEventListener(event, handler, [options]);

• event : 이벤트 이름
• handler : 핸들러 함수
• options : 아래 프로퍼티를 갖는 객체
  • once : true면 이벤트가 트리거 될 때 리스너가 자동으로 삭제됨.
  • capture : 어느 단계에서 이벤트를 다뤄야 하는 지를 알려주는 프로퍼티.
  • passive : true면 리스너에서 지정한 함수가 preventDefault()를 호출하지 않음.

element.removeEventListener(event, handler, [options]);

핸들러 삭제는 removeEventListener