본문 바로가기
문제와 해결/자바스크립트

이벤트

by 리양 2021. 5. 13.

 

이벤트란?

 - 어떤 사건을 의미한다.
   ex) 특정 버튼을 클릭했을때, 돔이 다 로드 되었을때
 - 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용이 가능하다.
 - 이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다.

 

 

이벤트를 호출하는 방식

1. 인라인 방식 (권장안함)

<태그명 on이벤트 = 자바스크립트 코드> </태그명>

 

2. 고전방식

[1]

 객체.on이벤트명 = function() {
  }


[2]

 function 함수명() {
  }
 객체.on이벤트명 = 함수명

 

 

3.addEventListener

element.addEventListener(event, function, useCapture);

첫 번째 매개 변수는 이벤트 유형 (예 : " click"또는 " mousedown"또는 기타 HTML DOM 이벤트) 입니다.

 

두 번째 매개 변수는 이벤트가 발생할 때 호출하려는 함수입니다.

 

세 번째 매개 변수는 이벤트 버블 링 또는 이벤트 캡처를 사용할지 여부를 지정하는 부울 값입니다. 

이 매개 변수는 선택 사항입니다.

 

www.w3schools.com/js/js_htmldom_eventlistener.asp

 

JavaScript DOM EventListener

JavaScript HTML DOM EventListener The addEventListener() method Example Add an event listener that fires when a user clicks a button: document.getElementById("myBtn").addEventListener("click", displayDate); Try it Yourself » The addEventListener() method

www.w3schools.com