Browser Event, Event object, Event handler

최준영·2021년 9월 1일
0
post-custom-banner

Event


  • 브라우저에는 화면의 크기를 마우스로 조절하거나, 스크롤 하거나, 마우스를 이동하거나 등 다양한 이벤트가 발생한다.
  • 그리고 해당 이벤트가 발생하면 어떤 일을 하라고 할 일을 등록할 수 있다.

이벤트 등록

  • addEventListener 함수를 사용해서 할 일을 등록할 수 있다.
var el = document.querySelector(".outside");
el.addEventListener("click", function(){
//내용
}, false);
  • 위의 식에서는 태그를 선택한 후 해당 태그에서 click 이벤트가 발생하면 두번째 인자인 함수가 실행되도록 코드가 작성되어 있다.
  • 이 함수는 이벤트 핸들러, 이벤트 리스너, 콜백함수로 부른다.

이벤트 객체

  • 브라우저는 이벤트 리스너를 호출할 때, 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달된다.
  • 따라서 이벤트리스너 안에서 이벤트 객체를 활용할 수 있다.
  • 많이 쓰이는 건 event.target이며, 이벤트가 발생한 element를 가리킨다.
profile
do for me
post-custom-banner

0개의 댓글