[javascript] 이벤트

1. 이벤트란

• 무언가 일어났다는 것
  • 자주 쓰는 DOM 이벤트 예시
    • click, mouseover, mousedown, mouseup
    • submit, focus
    • keydown, keyup
    • 등등
• 이벤트 핸들러
  • 이벤트에 반응하기 위해, 이벤트가 발생했을 때 실행되는 함수

2. 이벤트 핸들러 구현

1) HTML 속성

<input value="클릭해주세요." onclick="alert('클릭')" type=button>

 

 

해당 버튼을 누르면 onclick 안의 함수가 주어진다.

+ 이때, "" 안은 ''여야 한다. 그래야 헷갈리지 않고 코드가 제대로 실행된다.

+ 속성값은 대소문자 상관 없다.

 

2) DOM property

 

+ HTML attribute와 DOM property의 차이점

• HTML attribute는 HTML에 존재, 문자열
• DOM property는 DOM에 존재, DOM은 javascript의 객체이다(js로 DOM 트리를 이리저리 할 수 있음). js로 DOM에 property를 추가하거나 가져올 수 있음
  • DOM이란? 
    • 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스
• 결론은 HTML은 직접 태그를 만들어 그 attribute를 지정해준다면, DOM은 js로 접근해 그 태그(정확히는 구조화, 문서화된 DOM)을 수정할 수 있음

<input id="elem" type="button" value="클릭해 주세요.">
<script>
	elem.onclick= function() {
    	alert('감사합니다.');
    };
</script>

 

 

이 두 가지 방법의 치명적인 점은 onclick은 하나밖에 존재할 수 없다는 것

만약 다른 onclick함수를 배정한다면 기존의 핸들러는 덮어씌워진다 ..

- 그냥 함수 하나 안에 다 때려 넣으면 되는 거 아님?이라고 생각할 수도 있지만 함수는 한 가지 기능만 간결하게 수행해야 한다

 

3) addEventListener

여러 개의 이벤트 핸들러를 할당하기 위해 나온 메소드

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

 

삭제

removeEventListener

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

 

 

이때 주의할 점은, 삭제하는 handler함수가 무조건 동일한 함수 그대로 전달해 주어야 한다.

elem.addEventListener( "click" , () => alert('감사합니다!'));
elem.removeEventListener( "click", () => alert('감사합니다!'));

위와 같은 경우, 

같은 내용의 함수라도, 근본적으로는 다른 함수이기 때문에 제대로 삭제되지 않음

function handler() {
  alert( '감사합니다!' );
}

input.addEventListener("click", handler);
// ....
input.removeEventListener("click", handler);

이렇게 변수에 handler함수를 저장해놔야 지울 수 있다.

 

무조건 addEvent Listener를 써야하는 경우

DOM 프로퍼티에 할당할 수 없는 이벤트의 경우

ex. DOMContentLoaded

 

3. 이벤트 객체

• javascript의 event object
• 핸들러에 인수 형태로 전달됨 elem.onclick = function(event) { ...

 

• event.type
  • 이벤트 타입: click, keydown, ...
• event.currentTarget
  • 현재 이벤트를 처리하는 요소
• event.clientX / event.clientY
  • 이벤트가 발생했을 때, 커서의 상대 좌표(브라우저 좌표)
• 등등

이런 여러 정보를 event object에 담아서 핸들러에 인수 형태로 전달한다.

 

함수 말고 객체, 클래스도 전달 가능

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

이렇게 handler함수 말고도, obj라는 이벤트 객체 or class를 addEventListener에 전달할 수도 있다. 

<button id="elem">클릭해 주세요.</button>

<script>
  let obj = {
    handleEvent(event) {
      alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");
    }
  };

  elem.addEventListener('click', obj);
</script>

<button id="elem">클릭해 주세요.</button>

<script>
  class Menu {
    handleEvent(event) {
      // mousedown -> onMousedown
      let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
      this[method](event);
    }

    onMousedown() {
      elem.innerHTML = "마우스 버튼을 눌렀습니다.";
    }

    onMouseup() {
      elem.innerHTML += " 그리고 버튼을 뗐습니다.";
    }
  }

  let menu = new Menu();
  elem.addEventListener('mousedown', menu);
  elem.addEventListener('mouseup', menu);
</script>

 

 

 

---

참고

https://ko.javascript.info/introduction-browser-events

https://developer-talk.tistory.com/870

https://www.codestates.com/blog/content/dom-javascript