<!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>
<style>
ul li {
display: inline-block;
}
</style>
</head>
<body>
<h3>이벤트객체활용</h3>
<div>
<ul class="list">
<li><img src="img/1.jpg" alt="1" width="100"></li>
<li><img src="img/2.jpg" alt="1" width="100"></li>
<li><img src="img/3.jpg" alt="1" width="100"></li>
<li><img src="img/4.jpg" alt="1" width="100"></li>
</ul>
결과:
<div class="result">
<img src="img/1.jpg" alt="결과" width="300" >
</div>
</div>
<script>
var list = document.querySelector(".list");
var result=document.querySelector(".result");
list.onclick=function(e){
if(e.target.tagName!="IMG") return;
result.firstElementChild.src= e.target.src;
}
</script>
</body>
</html>
onclick의 e.target은 클릭한 대상임.
'JS' 카테고리의 다른 글
| 230103 JS 이벤트 전파의 원리 (0) | 2023.01.03 |
|---|---|
| 230103 JS 이벤트객체 활용 실습2 (0) | 2023.01.03 |
| 230103 JS 이벤트객체 (0) | 2023.01.03 |
| 230103 JS 클래스 속성제어-toggle실습 (0) | 2023.01.03 |
| 230102 JS 클래스 속성 제어 (0) | 2023.01.02 |
