[JS]이벤트 핸들러 관련

1. 이벤트 핸들러 등록하기
태그.이벤트핸들러프로퍼티 = function() {};
프로퍼티에 직접 이벤트핸들링을 하게되면
추가, 수정 등에 제약이 생긴다.

myTag.addEventListner('event', handler);
이벤트 핸들러를 등록함
여러번 사용해서 독립적인 이벤트를 추가 가능하다.

myTag.removeEventListner('event', handler);
등록한 이벤트를 개별적으로 제거함.
* 이벤트를 삭제할 때 등록했던 핸들러를 그대로 전달해야함
* 익명함수로 똑같이 작성해도 다른 함수여서 정상적으로 작동하지 않는다.
* 핸들러 부분에 함수명만 적으면된다.


2. 이벤트 객체
이벤트의 상세한 정보를 담고있는 이벤트객체가 자동생성된다
이벤트 핸들러 함수의 첫번째 파라미터는 이벤트 객체가 전달된다.
이벤트 객체에서 자주 사용되는 공통적인 프로퍼티는 type과 target

type 은 발생한 이벤트의 타입, target은 이벤트가 발생한 해당 그 요소를 담고있다.
ex)
function 함수이름(e) {
  e.target >>>> 이건 아래 myTag를 가리키는 것이다.
}
myTag.addEventListener('click', 함수이름);


3. 이벤트 버블링

하나의 요소에 이벤트가 발생하게 되면 같은 타입의 이벤트에 한해서 부모 요소의 핸들러도 동작하게 된다. 윈도우객체를 만날때까지 올라감
* target 프로퍼티 >> 이벤트 버블링이 시작된 위치를 가리킨다.
* currentTarget >> 이벤트 버블링이 시작된 위치와 상관없이 실제 이벤트 핸들러가 동작된 요소를 가리킨다.

e.stopPropagation();
이벤트 버블링을 멈추는 메소드
버블링을 막을 수 있지만 정말 필요한 경우가 아니라면 이벤트 버블링을 막지 않는다.


4. 이벤트 위임
<ul>
  <li></li>
  <li></li> 
  <li></li>
</ul>
에서 li 에 이벤트 핸들러를 등록할 때
li가 추가되는 등 변화가 있을 때 유연하게 대응할 수가 없다.

이벤트 버블링을 이용해 부모 요소에게 이벤트를 대신 등록하는 것이다.
ex) e.target.동작~~~
여기서 target은 자식요소에 이벤트가 발생하면 target자체는 자식요소가 된다.
* 문제점 : 부모 요소에게 등록된 이벤트 핸들러이기 때문에 온전한 부모 요소에 이벤트가 발생하면 부모 요소가 영향을 받는다
* 해결책 : 조건을 달아준다.
ex)
if (e.target.tagName === 'LI') // tagName은 대문자로 반환된다.
if (e.target.classList.contains('클래스') 등등등



5. 브라우저의 기본 동작

e.preventDefault();
브라우저의 기본동작을 막는 메소드

ex)
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
alert('마우스 오른쪽 클릭은 사용할 수 없습니다.');
});