[JavaScript] 브라우저 이벤트

Event

브라우저에서는 많은 이벤트가 발생합니다. 브라우저 화면의 크기를 조절한다던가 스크롤을 내리거나 무엇을 클릭할 때, 아니면 html/css를 렌더링을 마쳤다(Load) 등 많은 이벤트가 발생합니다.  그 발생된 Event에 우리는 그 땐 어떤 일을 하라고 할 일을 등록할 수가 있습니다.

즉, HTML Element별로 어떤 event(주로 키보드나 마우스)가 발생했을 때 특정 행위를 일으키고 싶다면, 대상 Element를 찾고 어떤 Event를 등록하면 됩니다. 이것을 JavaScript로 구현할 수 있습니다.

Event 등록

Event 등록 표준방법입니다.

addEventListener() 함수를 사용할 수 있습니다. addEventLister를 사용하면 여러 개의 Event Listener를 등록할 수 있습니다.

var el = document.querySelector(".outside");

el.addEventListener("click", function(){ //click시 오른쪽의 이벤트 리스너 함수(콜백함수)가 실행.

//do something..

}, false);

// "click"이외에 엄청나게 많은 Event가 있습니다.

// [MDN 참조] https://developer.mozilla.org/en-US/docs/Web/Events

• id가 outside인 element를 찾고
• click이 일어나면 그것에 대한 함수가 실행됩니다. 이 함수를 Event Listener 또는 Event Handler라고 합니다

Event 버블링

이벤트 버블링 현상은 부모 태그가 있을 경우 순차로 자식의 이벤트가 부모에게도 역시 전달되는 현상입니다.

밑의 예제에서 child에 click 이벤트를 줬지만 parent, ancestor 역시도 이벤트가 전달됩니다.

<div id="ancestor">

<div id="parent">

<div id="child">

event

</div>

</div>

</div>

Event 객체

브라우저가 이벤트 리스터를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지의 정보를 담은 이벤트 객체를 생성해서 리스너함수(콜백)에 전달합니다. 따라서 Event Listener 안에서는 Event Object를 활용해서 추가적인 작업을 할 수 있게됩니다.

target을 통해서 정보를 알 수 있고 이외에도 preventDefault()와 stopPropagation()같은 대표적인 메서드들이 있습니다.

var element = document.querySelector('.outside');

element.addEventListener('click',(event) => {

console.log(event.target.className, event.target.nodeName);

console.log(event.target.innerText);

alert('clicked!');

debugger;

})

event.preventDefault();

이 메소드는 기본적으로 정의된 이벤트를 작동하지 못하게 해줍니다. 밑에 예제에서 <a>태그에 의해서 해당 url로 이동해야 하지만 preventDefault()가 이벤트를 막아서 링크로 이동하지 않습니다. 하지만! Event가 전파(버블링 / 캡처링 현상)되는 것을 중단시키지는 않습니다. 

<a href="http://www.naver.com" id="link">Naver</a>

<script>

    document.querySelector('#link').addEventListener('click', (e) => {

        e.preventDefault();

    });

</script>

event.stopPropagation();

stopPropagation()을 사용하면 Event의 전달, 전파를 막아줍니다. 하지만 위의 preventDefault()처럼 기본 Event를 막아주지는 않습니다!

[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다