[JS](Event) addEventListener

동적인 웹 애플리케이션의 구현을 위해서는 사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다.

JavaScript 이벤트란

DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다.

DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다.

이벤트 리스너

이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.

이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascript 이벤트가 발생할 때 특정 함수를 호출한다.

DOM객체.addEventListener(이벤트명, 실행할 함수명, 옵션)

각 매개변수를 보면

이벤트명: Javascript에서 발생할 수 있는 이벤트 명을 입련한다.

함수명: 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다.

옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.

<body>
  <div id="btn">버튼 확인?</div>
 </body>

document.getElementById("btn").addEventListener("click", (e) => {
   console.log(e.target)l
});

위 방식으로 이벤트 리스너를 등록하면 사용자 이벤트마다 특정 코드를 실행하는것이 가능하다.

이벤트 리스너를 이용할 경우 특정 스크롤 이벤트 발생 시 이벤트를 실행

혹은 input 태그에 글자 수를 확인하는 등의 코드로 활용이 가능하다.

event

※. 이벤트 (EX) click, mousedown

주의: 이벤트명 적을 때 on 접두어를 붙이지 않는다.

function

※. 이벤트 발생 시 호출 (=실행)할 함수

주의: 함수명만 적을 땐, () 없이 함수명만 적는다.

useCapture

※. 이벤트 확산 여부 참거짓.(1: 확산방지, 0: 확산허락)

See the Pen Untitled by sangheun park (@sangheun-park) on CodePen.

[JS](타이머함수) setTimeout() , setInterval() (0)	2023.07.11
[JS](Event) onfocus, onblur, onchange (0)	2023.07.10
[JS] 요소(Element)찾기 (0)	2023.07.09
[JS] Map 함수 (0)	2023.07.07
[JS] 문자열 string (0)	2023.07.07

sang969