이벤트전파와 여러클래스
이벤트를 특정 태그에 주고 싶을 때는 클래스를 이용하면 됨
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<section id="section">
<div class="list">
<div>
<span>홍길동</span>
<button type="button" class="btn sel">선택</button>
<button type="button" class="btn del">삭제</button>
<button type="button" class="btn aaa">aaa</button>
</div>
<div>
<span>김길동</span>
<button type="button" class="btn sel">선택</button>
<button type="button" class="btn del">삭제</button>
<button type="button" class="btn aaa">aaa</button>
</div>
<div>
<span>홍길자</span>
<button type="button" class="btn sel">선택</button>
<button type="button" class="btn del">삭제</button>
<button type="button" class="btn aaa">aaa</button>
</div>
</div>
</section>
<script>
var list = document.querySelector(".list");
list.addEventListener("click",function(){
if(event.target.tagName!="BUTTON") return;
var arr=event.target.classList;
if(arr.contains("sel")){//선택버튼
event.target.previousElementSibling.style.color="red";
}else if(arr.contains("del")){//삭제버튼
event.target.parentElement.remove();
}else if(arr.contains("aaa")){///aaa버튼
}
})
</script>
</body>
</html>
'JS' 카테고리의 다른 글
| 230103 JS dataset (1) | 2023.01.03 |
|---|---|
| 230103 JS 이벤트중단 preventDefault() (0) | 2023.01.03 |
| 230103 JS 이벤트 전파의 원리 (0) | 2023.01.03 |
| 230103 JS 이벤트객체 활용 실습2 (0) | 2023.01.03 |
| 230103 JS 이벤트객체 활용 실습 (0) | 2023.01.03 |
