-
[JavaScript] addEventListenerJavaScript 2022. 5. 24. 14:58728x90반응형
DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)
각 매개변수를 살펴보면
이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다.
함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다.
옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.
<html> <a>클릭</a> </html> <script> const a = document.querySelector('a'); a.addEventListener('click', showConsole); function showConsole() { console.log("콘솔로그 실행"); } </script> 출처: https://ordinary-code.tistory.com/64 [김평범's OrdinaryCode:티스토리]자주 사용하는 이벤트의 종류
- click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
- mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
- mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
- mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
- mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
- mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
- focus – HTML요소에 포커스가 갔을때 발생한다.
- blur – HTML요소가 포커스에서 벗어났을때 발생한다.
- keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
- keydown – 키를 누를 때 발생한다.
- keyup – 키를 눌렀다가 떼는 순간에 발생한다.
- load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
- resize – 브라우저 창의 크기를 조절할때 발생한다.
- scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
- unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
- change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.
ex) 엔터키 눌렀을때 이벤트 동작하기
const elem = document.getElementById("input"); elem.addEventListener("keypress", (event)=> { if (event.keyCode === 13) { // key code of the keybord key event.preventDefault(); // your code to Run } });LIST'JavaScript' 카테고리의 다른 글
[JavaScript] HTML에 동적으로 태그 추가하기 (0) 2022.05.27 [JavaScript] html 요소의 속성 다루기 .getAttribute(), .setAttribute(), .removeAttribute() (0) 2022.05.24 [JavaScript] Promise, Async & Await (0) 2022.02.22 [JavaScript] Callback (0) 2022.02.19 [JavaScript] JSON (0) 2022.02.19