16. Event

Event

이벤트란 말그대로 사건입니다. 우리가 어떤 행동을 취했을때 그에 맞는 사건이 일어납니다.

Event Listener

이벤트를 듣고있다가 해당 이벤트가 일어나면 그에 맞는 로직을 실행 시켜주는 것 입니다.

대상.addEventListener(이벤트타입, 콜백, 버블링캡쳐링);

callback

등록만 해놓고 조건이 충족되었을 때 부르는 함수입니다. 버튼이 눌렸을때 박스의 색상이 변경되어야한다면, 박스의 색을 변경시키는 함수를 콜백으로 클릭 이벤트에 달아놓고 클릭 이벤트가 일어났을 때 박스의 색상을 변경시키는 함수를 불러오는 것입니다.

var btn = document.getElementById('btn'); // btn이라는 아이디를 가진 버튼이 있다고 가정 
btn.addEventListener('click', function(evt){ // 콜백에는 항상 event 객체가 넘어옵니다.
  console.log(this); // 이벤트의 this는 항상 호출한 친구를 부릅니다. 이 때의 this = btn 입니다.
  console.log(evt); // click 이벤트에 관한 객체가 넘어옵니다.
})

구현

실제로 만들어보면서 익혀볼까요?

1.브라우저가 배가 고픕니다. 버튼을 눌르면 브라우저에게 밥을 줄 수 있습니다. 3초 후 다시 배가 고프다고합니다. (배고픔 알림) => (밥주기) => (배부르다고 알림) => (3초후 다시 배고픔 알림)

구현 : https://jsfiddle.net/fcf7hxL3/3/ 2.빨간색의 상자가 있습니다. 버튼을 눌렀을때 상자를 파란색으로 바꿔주세요

구현 : https://jsfiddle.net/t1gc87nv/1/

3.클릭된 위치의 좌표가 궁금해요 구현 : https://jsfiddle.net/m4b9h265/

4.간단한 로그인을 해보고싶어요 구현 : https://jsfiddle.net/c7h7cd1d/

5.스크롤 위치를 알고싶어요 (자세한건 제이쿼리를 이용해서 무한 스크롤할때 해볼게요) 구현 : https://jsfiddle.net/fdpsqmu3/

6.해당영역에 마우스가 들어왔는지 나갔는지 알고싶어요 구현 : https://jsfiddle.net/q7pxodw0/

이벤트 전파

이벤트가 겹쳐서 중복되는 의도치 않은 이벤트 현상이 일어날때가 있는데요 대표적인 예가 캡처링과 버블링입니다.

대상.addEventListener(이벤트타입, 콜백, 버블링캡쳐링) // 3번째 인자로 버블링과 캡처링을 조절할 수 있습니다.

캡처링 : 부모의 이벤트가 자식까지 전달되는 현상입니다.

구현 : https://jsfiddle.net/eughcn8f/1/

버블링 : 자식의 이벤트가 부모까지 전달되는 현상입니다.

구현 : https://jsfiddle.net/j8w8ekgn/1/

이러한 현상을 막기위한 메서드들이 있습니다

  • Event.preventDefault

폼을 submit하거나 a 링크를 클릭하면 다른 페이지로 이동합니다. 하지만 우리가 원하는 동작이 기본 이벤트 동작이 아니라면 기본 이벤트 동작을 제거해야될 상황이 분명히 생깁니다. 이러한 요소가 가지고 있는 기본 동작을 막아버리는 메서드가 preventDefault() 입니다.

구현 : https://jsfiddle.net/n4451cby/

  • Event.stopPropagation()

    어느 한 요소를 이용하여 이벤트를 처리한 후 이벤트가 부모 요소로 버블링되는 것을 중단시키기 위한 메서드에요

Previous15. DOMNextESLint

Last updated