TIL 6월 13일 - event object, parameter 와 argument

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

• 참고
  • https://stackoverflow.com/questions/35936365/what-exactly-is-the-parameter-e-event-and-why-pass-it-to-javascript-functions
  • https://poiemaweb.com/js-event

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

• 참고
  • https://stackoverflow.com/questions/156767/whats-the-difference-between-an-argument-and-a-parameter?page=1&tab=votes#tab-top
  • https://www.quora.com/What-is-the-difference-between-arguments-and-parameters-in-JavaScript

더 공부해야할 것들

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