이벤트 처리 이해하기, 이벤트 추가

-  유저의 조작에 따라 이벤트를 실행하고 싶을 때

웹 사이트는 클릭, 탭, 스크롤, 화면 불러오기, JSON 읽기 오기 등 다양한 이벤트가 존재하며,

자바스크립트는 클릭, 탭 등의 동작에 따른 이벤트 처리가 가능

이벤트 처리는 addEventListener( )를 사용해 제어

 

** 이벤트 추가하기

-  이벤트의 함수를 지정하고 싶을 때

이벤트타깃.addEventListener(이벤트명, 리스너, [옵션*])  -   이벤트 리스너 설정

*생략가능

addEventListener( )를 사용해 이벤트의 함수를 지정할 수 있음

이벤트 발생 시 실행하는 이벤트의 함수는 다음과 같다

// 요소의 참조 정보 가져오기 const button  =  document.querySelector( '.button' ); // 화살표 함수 사용하기 button.addEventListener( 'click' , ( ) => {    console.log( '버튼 클릭 이벤트가 발생하였습니다.' ); });

 

//  요소의 참조 정보 가져오기 const button  =  document.querySelector('.button'); //  function 선언을 사용하기 button.addEventListener( 'click', function( ) {    console.log( '버튼 클릭 이벤트가 발생하였습니다.' ); });

 

// 요소의 참조 정보 가져오기 const button  =  document.querySelector('.button'); // 함수명 지정하기 button.addEventListener( 'click', onClickButton); function onClickButton( ) {     console.log( ' 버튼 클릭 이벤트가 발생하였습니다.'); });

 

화살표 함수는 this를 고정할 수 있다는 장점을 가졌음

 

** 이벤트 정보가져오기

이벤트의 함수는 인수를 통해 이벤트 정보를 가져올 수 있음

button.addEventListener( 'click', ( event )  => {    //  이벤트 정보 출력     console.log( event ); });

 

이벤트 정보(이벤트 객체)는 발생한 이벤트에 따라 MouseEvent나 KeyboardEvent 등 다양한 종류가 있음

이벤트 객체는 이벤트가 발생한 요소와 참조 정보, 입력된 키 등의 정보를  포함

발생한 요소는 target 속성을 이용해 확인할 수 있음

button.addEventListener( 'click' , (event)  =>  {   // 클릭한 버튼의 요소 출력    console.log( event.target); });