DOM의 이벤트에는 다양한 종류가 있다. DOM의 이벤트 처리기는 주로 .addEventListener()를 사용하며, removeEventListener()를 사용하여 제거할 수도 있다. DOM을 사용하지 않고 인라인 형식으로 onchange, onclick을 사용하여 이벤트를 설정할 수도 있다.
.addEventListener()
이벤트 종류에 들어가는 항목은 w3c의 DOM Event Object에서 확인이 가능하다.
- 요소.addEventListener("이벤트종류", 함수);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
}
#div1{
background-color: lightblue;
}
#div2{
background-color: lightgreen;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
document.querySelector("#div2").addEventListener("click", function(){
document.querySelector("#div2").style.zIndex = -1;
});
</script>
</body>
</html>
addEventListener의 클릭을 사용하여, #div2를 클릭했을 때 z-index를 -1로 변경하여 #div1의 뒤에 위치될 수 있도록 하였다.
.removeEventListener()
- 요소.removeEventListener("이벤트종류", 함수);
addEventListener에서 지정한 옵션을 그대로 removeEventListener에 제공해야한다. 아래 예제의 경우 removeEventListener를 사용해서 #div2를 아무리 클릭해도 이벤트가 발생하지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
}
#div1 {
background-color: lightblue;
}
#div2 {
background-color: lightgreen;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
function func1(){
document.querySelector("#div2").style.zIndex = -1;
};
const div2 = document.querySelector("#div2");
div2.addEventListener("click", func1);
div2.removeEventListener("click", func1);
</script>
</body>
</html>
인라인 형식
인라인 형식은 태그 안에 이벤트를 삽입하여 시행한다. 아래 예저는 더블클릭(dblclick)이라는 이벤트를 인라인 형식으로 넣어, 더블클릭을 했을 때 안녕하세요가 적힌 <p>태그가 생성이 되는 함수를 적용했다.
- on이벤트종류 = "함수명"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
}
#div1 {
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1" ondblclick="func1()"></div>
<script>
function func1(){
let p = document.createElement("p");
p.textContent = "안녕하세요!";
document.querySelector("#div1").append(p);
}
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript 콜백함수란? (0) | 2024.07.29 |
|---|---|
| JavaScript : sort()와 localeCompare()을 이용해 정렬해보자 (0) | 2024.07.29 |
| JavaScript의 특징: 스코프와 실행 컨텍스트 (0) | 2024.07.29 |
| JavaScript : DOM에서 class를 설정해보자 (0) | 2024.07.29 |
| JavaScript : DOM을 통해 input 값 받아오기 (0) | 2024.07.29 |
| JavaScript에서 this는 무엇을 가리키는걸까? (0) | 2024.07.29 |
| JavaScript : DOM을 통해 속성을 조작해보자 (0) | 2024.07.27 |
| JavaScript : DOM에서 요소를 조작해보자 (0) | 2024.07.25 |