Event object

event는 click, load, keydown 등등 아주 많았다. 특정 HTMLElement에 addEventListener로 해당 이벤트가 발생할 때 특정 함수를 실행하도록 하면, 이 함수에 event Object를 만들어 argument로 자동으로 전달한다고 한다.
다만, 함수를 선언할 때 event 객체를 전달받을 첫번째 parameter를 명시적으로 선언해두어야 한다고 한다.

1. Event.target
  • 실제로 이벤트를 발생시킨 요소를 가리킨다고 한다. (this와 항상 일치하지는 않음, 이런 특징덕에 이벤트 위임 시에 Event.target을 사용해주면 된다.)
  • currentTarget은 항상 바인딩된 요소를 가리킨다고 한다. (this와 항상 일치)
2. Event.currentTarget
3. Event.type
4. Event.cancelable
5. Event.eventPhase

parameter와 argument

  function someFunction(a, b, c){
      ... 
  }

  someFunction(1, 2, 3);
  • 위에서 a, b, c는 parameter이고 1, 2, 3은 argument이다.

  • arguments는 어느 길이든 전달할 수 있다.
    someFunction(1, 2, 3, 4, 5, ...)

  • someFunction(1, 2, 3)을 실행할 때, [1,2,3]이라는 array-like object인 arguments를 생성해서 전달한다고 한다.

  • stackoverflow 댓글에 멋진 명언이 있어서 가져와봤다.

"You define parameters, and you make arguments." - Greg M. Krsak

더 공부해야할 것들

  • codestates의 과제로도 나온 것 같기도 하고, event 발생 후 버블링과 캡쳐링이라는 개념을 얼른 공부해둬야할 것 같다.
  • 오늘 공부한 내용과는 전혀 다르지만, 코드스테이츠 수업 중, debounce throttle을 csstrick 홈페이지에서 봤는데, 참고할만 할 것 같다. (링크 : https://css-tricks.com/debouncing-throttling-explained-examples/)