사용된 HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="main.js"></script>
<link rel="stylesheet" href="main.css" />
<title>JS practice</title>
</head>
<body>
<div class="btns">
<button id="id_button">ID</button>
<button class="class-button">CLASS</button>
<button class="class-button">CLASS2</button>
<button class="class-button">CLASS3</button>
</div>
</body>
</html>기본적인 이벤트 핸들러 등록하는 방법
1. 자바스크립트에서 onclick 함수 이용하기
const helloBtnById = document.getElementById("id_button");
helloBtnById.onclick = () => {
console.log("ID"); //ID출력
};2. HTML에서 onclick 속성으로 추가하기
<button id="id_button" onclick="console.log('ID')">ID</button>값: id버튼을 세번눌렀습니다.
함수로 이벤트 핸들러 다루기
사용된 HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<script defer src="main.js"></script>
<title>JS practice</title>
</head>
<body>
<div>
<button class="button-red">Hello</button>
<button class="button-blue">Hello2</button>
</div>
</body>
</html>1. element.addEventListener("type", callback)
이벤트 추가하기, callback 부분은 콜백함수를 의미한다.
예시:
const btn_1 = document.querySelector(".button-red");
const btn_2 = document.querySelector(".button-blue");
btn_1.addEventListener("click", () => {
console.log("hello");
});2. element.removeEventListener("type", callback)
이벤트 삭제하기, 이벤트를 지우기 위해서는 callback함수의 이름을 알아야한다. 만약 위 예제와 같이 익명함수로 사용한다면 함수에 접근할 방법이 없기 때문에 이벤트를 삭제할 수 없다.
const btn_2 = document.querySelector(".button-blue");
const handleEvent1 = () => {
console.log("hello");
};
btn_1.addEventListener("click", handleEvent1); // 첫번째 이벤트 등록
btn_2.addEventListener("click", () => {
btn_1.removeEventListener("click", handleEvent1); //두번째 버튼 클릭 시 첫번째 버튼 이벤트 삭제
});이벤트 한번만 실행시키기
이벤트를 한번만 실행시키고 싶다면 ,{once:true}를 추가하면 된다.
const btn_1 = document.querySelector(".button-red");
const btn_2 = document.querySelector(".button-blue");
btn_1.addEventListener("click", () => {
console.log("hello");
}, {once : true});'JS' 카테고리의 다른 글
| [JS] 요소 다루기 정리 (0) | 2023.04.21 |
|---|---|
| [JS] 자바스크립트 태그 선택하기 (0) | 2023.04.20 |
| [JS]모듈(Module) 모듈화(Modularization)/ Import/Export (0) | 2023.04.06 |
| [JS] 다양한 배열 메소드 (0) | 2023.04.06 |
| [JS] 에러 객체와 try catch문 (0) | 2023.04.05 |
