[TIL] 22.04.06 이벤트핸들러 정리

1. '핸들러'의 정의 : 이벤트가 발생했을 때 실행되는 함수.

• 핸들러 할당 1 : onclick 속성
  • 방법1 (자주 쓰이지 않음) : html 에서으로 속성값으로 괄호 포함한 함수 입력하여 할당 *onclick="alert('클릭!')"  -> 브라우저가 속성값 "alert('클릭!')"을 본문으로 하는 핸들러 함수를 만듦.
  • 방법 2 : DOM프로퍼티에서 button.onclick = function() { alert('클릭!'); }; 으로 직접 할당
    *별도로 생성되어 있는 함수를 핸들러로 할당할 경우 button.onclick = sayHello ; 처럼 괄호 없이 입력. 괄호 입력하면 함수가 아니라 함수 실행한 결괏값이 할당됨.
  • onclick프로퍼티는 하나밖에 없기 때문에 복수의 이벤트핸들러를 할당할 수 없으며, 제거 시 null을 할당하면 된다.
• 핸들러 할당 2: addEventlistener / removeEventListener 메소드
  • 스크립트에서 element.addEventListener(event, handler, [options]);  로 할당. (option은 once, capture, passive 프로퍼티를 갖는 객체)
  • 삭제 원할 시 반드시 외부 변수에 핸들러 함수를 저장해 놓고, removeEventlistener(event, handler); 로 동일한 함수를 받아야 가능.(동일한 주소값이어야 제거 가능)
  • 여러 번 호출해 하나의 elem에 여러 핸들러를 붙일 수 있음. + 이 방식으로만 사용 가능한 event가 있어서 더 범용적

2. 이벤트 객체 event object : 이벤트 발생 시 브라우저가 만드는 객체. 이벤트에 관한 상세한 정보를 넣은 뒤, 핸들러에 인수 형태로 전달함.

• 접근
  • html 핸들러 : onclick="alert(event.type)" 
  • 바로 인자로 event 넣고 함수에서 활용 가능.
• 어떤 방법으로 이벤트 핸들러를 할당하던, 첫 번째 인자는 항상 이벤트 객체

 

3. 버블링 : 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러 실행 이후 부모 요소의 핸들러도 동작.

• 버블링은 최상단 조상 요소(document 객체 or window 객체) 만날 때까지 계속됨.
• 중단하고 싶으면 : 이벤트 객체의 메서드인 event.stopPropagation() 사용 시 위로 일어나는 버블링 중단.
• 요소의 다른 버블링을 함께 중단하고 싶으면 : event.stopImmediatePropagation()

 

4. event.target : 이벤트가 발생한 가장 안쪽의 요소(event bubbling에서 가장 자손)를 target 요소라고 부름.

• 버블링 때문에 event.target 과  this(event.currentTarget)은 서로 다를 수 있다!
  • event.target은 사용자가 실제로 targeting해서 이벤트가 시작된 '타깃' 요소. 위로 버블링이 아무리 진행되어도 바뀌지 않음.
  • this는 '현재' 실행 중인 핸들러가 있는 요소를 참조.

 

-> 즉 이런 연유로 노마드코더 강의에서 event.target 객체를 뒤져 원하는 값을 찾아내는 것. got it!

참고 : https://ko.javascript.info/bubbling-and-capturing