728x90
웹 개발을 하다보면 부모 엘리먼트 내에 여러개의 버튼을
포함해야 하는 경우가 많다.
물론 모든 버튼에 각각 클릭 이벤트 따로 할당하여
서로 다른 기능을 아래의 예제와 같이 각각 부여해도
원하는 기능을 구현할순 있지만,
저얼~~~때 좋은 방법은 아니다.
//엘리먼트 각각의 이벤트 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<ul id="click-sample">
<li><img class="images" src="./images/...1.png" name="이미지1"/></li>
<li><img class="images" src="./images/...2.png" name="이미지2"/></li>
<li><img class="images" src="./images/...3.png" name="이미지3"/></li>
<li><input type="button" id="image-add-btn" value="이미지추가"/></li>
</ul>
</section>
<!-- 모든 버튼 각각 이벤트 처리 -->
<script>
//이미지 버튼 이벤트 설정
var imgs = document.querySelectorAll('.images');
for(let i=0;i<imgs.length;i++){
var image_element = imgs[i];
imgs[i].addEventListner('click', e => alert(e.target.name + ' 클릭!'));
}
//이미지 추가 버튼 이벤트 설정
var imgAddBtn = document.querySelector('#image-add-btn');
imageAddBtn.addEventListener('click',e => alert(e.target.value + ' 클릭!'));
</script>
</body>
</html>
그러면 각각의 엘리먼트에 이벤트를 할당하지 않고,
어떻게 여러개의 버튼을 한개의 이벤트 내에 할당할수 있을까?
바로 아래 예제와 같이 부모엘리먼트에 이벤트를 할당하는 것이다.
//부모 엘리먼트를 통한 이벤트 할당
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<ul id="click-sample">
<li><img src="./images/...1.png" name="이미지1"/></li>
<li><img src="./images/...2.png" name="이미지2"/></li>
<li><img src="./images/...3.png" name="이미지3"/></li>
<li><input type="button" value="이미지추가"/></li>
</ul>
</section>
<!-- 모든 버튼 각각 이벤트 처리 -->
<script>
//이미지 버튼 이벤트 설정
let ulTag = document.querySelector('#click-sample');
ulTag.addEventListener('click',e => {
if(e.target.nodeName === 'IMG') { //여기서 태그이름은 모두 대문자로 해야한다.
alert(e.target.name + ' 클릭!');
} else if(e.target.nodeName === 'INPUT') {
alert(e.target.value + ' 클릭!');
} else return;
});
</script>
</body>
</html>
아래 그림을 보면, 버튼이라는 엘리먼트를 감싸고 있는
부모 엘리먼트를 그림으로 만들어 보았다.
즉, 사용자가 버튼을 클릭시,
button-> li -> ul -> section -> body -> html 순으로
이벤트가 전달이 되는 것이다.
하나의 부모 태그 내에
같은 기능을 수행하는 여러개의 이벤트가 있다면,
해당 태그에 하나의 공통된 이벤트를 할당함으로써,
코드는 간결해지고, 유지보수 또한 수월해진다.
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 기본 이벤트 삭제 event.preventDefault() (0) | 2021.02.01 |
|---|---|
| [Javascript] 노드복사 importNode (3) | 2021.02.01 |
| [Javascript] 부모 태그 찾기 .parentElement (0) | 2021.01.31 |
| [Javascript] ClassList .contains/.add/.remove/.toggle (0) | 2021.01.31 |
| [Javascript] Wrapping Class (래핑 클래스) (0) | 2021.01.29 |
댓글