[JavaScript] function(e), 이벤트 버블링, 브라우저 이벤트

addEventListener("click", function (e) { ... });

function (e)는 event 관련 object를 받는 argument다. 

 

'click'이라는 이벤트가 발생했을 때 이벤트에 관한 정보가 담기는 이벤트 객체가 생성된다.

이때 유일한 매개변수로 이벤트 객체가 전달되는데, 'e'라고 이름을 붙여준 바로 이것이다.

이벤트 객체에는 발생한 이벤트에 대한 여러 정보값이 담긴다. (ex 마우스 이벤트 -> 마우스의 위치 정보 등)

이를 활용하기 위해 'e'로 이벤트 객체를 받아줘야 한다.

---

 

이벤트 객체 e

이벤트 객체는 이벤트가 발생했을 때 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보가 담겨있다. 

이벤트 객체는 이벤트 핸들러의 첫 번째 인자로 받는다. 위치는 첫 번째로 항상 고정이다.

 

e.currentTarget; - 핸들러를 할당받은 요소 (this와 같음 = 이벤트 리스너 달린 곳)

e.target; - 실제 이벤트가 발생한 node (유저가 실제로 누른 것)

e.type; - 브라우저 이벤트 종류

e.key; - key값을 문자열로 나타냄

e.keyCode; - key값을 코드로 나타냄 ( *deprecated 라고 하니 이 방법은 지양 하자)

e.defaultPrevented; - preventDefault 호출여부 

e.preventDefault(); - 기본으로 실행되는 이벤트 기본 동작을 취소하여 막아줌

e.stopPropagation(); - 내 상위요소로 이벤트 버블링 막아줌

 

ex>

form태그 안에 있는 input에서 submit하게 되면 기본적으로 페이지를 reload하게 된다.

새로고침을 원하지 않는다면 아래와 같이 e.preventDefault() 메서드를 호출해서 이벤트를 막을 수있다.

    $input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        onSubmit();
      }
    });

 

 

이벤트 버블링 ?

 

항상 이벤트 버블링이 일어난다. 

클릭을 하면 부모 요소까지 다 클릭한 것처럼 된다.

한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고,

이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.

 

 

---

 

이벤트 종류

 

키보드 & 마우스 이벤트

 

keydown - 문자, 숫자, 방향, 특수문자, ctrl, opt, shift, tab, delete, enter 를 눌렀을 때 연속 발생. (그 외 1번 발생)

keypress - 문자, 숫자, 방향, 특수문자, ctrl, opt, shift, tab, delete, enter 를 눌렀을 때 연속 발생. (그 외 0번 발생)  ( *deprecated 라고 하니 이 방법은 지양하도록 하자)

keyup - 키보드 버튼을 땠을 때 1번 발생

mousedown/mouseup - 마우스 왼쪽 버튼을 눌렀을 때/땠을 때

click - 마우스 왼쪽 버튼을 눌렀을 때

scroll -  스크롤을 움직일 때

 

 

 

userInput.addEventListener("keyup", e => {
  if (e.keyCode === 13) {
  	onSearch(e.target.value);
  }
});

window.addEventListener('scroll', () => {
	console.log(window.scrollTop);
	console.log(window.pageYOffset);
});