728x90
자바스크립트 부모로의 이벤트 전파 방지
Event.stopPropagation();
간단 설명 ↓
자바스크립트에서
자식 엘리먼트에서 이벤트 발생시,
부모 엘리먼트에 같은 이벤트가 설정되어있다면,
해당 이벤트에 할당된 기능도 함께 실행된다.
이는 이벤트 전파 현상으로 인한 건데,
상단의 그림과 같이 이벤트가 전파되어진다.
위와 같은 현상을 방지하기 위해서는
Event.stopPropagation()을 사용해야하는데,
아래 예제를 참고하도록 한다.
샘플 예제↓
[Html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StopPropagation Example</title>
</head>
<body>
<section id="section-sample">
<div id="div-sample">
<input type="button" value="클릭!">
</div>
</section>
<script src="stopPropagation.js"></script>
</body>
</html>
[Javascript]
let secElem = document.querySelector('#section-sample');
let divElem = document.querySelector('#div-sample');
let btn = document.querySelector('#div-sample>input[type="button"]');
//Section 이벤트 생성
secElem.addEventListener('click', e => {
alert('section 클릭!');
});
//Div 클릭 이벤트 생성
divElem.addEventListener('click', e => {
alert('div 클릭!');
});
//Input 버튼 클릭 이벤트 생성
btn.addEventListener('click', e => {
alert('button 클릭!');
});
[결과 출력]
위 예제는 부모 엘리먼트와 자식 엘리먼트의
모든 이벤트가 실행되고 있다.
이번에는 스크립트에 하단 코드와 같이
Event.stopPropagation()를 코드에 추가해 보도록 한다.
//Event.stopPropagation() 추가하여,
//이벤트 전파 방지
let secElem = document.querySelector('#section-sample');
let divElem = document.querySelector('#div-sample');
let btn = document.querySelector('#div-sample>input[type="button"]');
//Section 이벤트 생성
secElem.addEventListener('click', e => {
alert('section 클릭!');
});
//Div 클릭 이벤트 생성
divElem.addEventListener('click', e => {
alert('div 클릭!');
});
//Input 버튼 클릭 이벤트 생성
btn.addEventListener('click', e => {
//자식 엘리먼트 이벤트에 추가!
e.stopPropagation();
alert('button 클릭!');
});
[결과 출력]
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] Promise 와 Callback 의 차이 (0) | 2021.02.08 |
|---|---|
| [Javascript] Class 클래스 [get,set 구문 오류 필독] (0) | 2021.02.04 |
| [Javascript] 이벤트의 추가 addEventListener() (0) | 2021.02.02 |
| [Javascript] 이벤트 트리거 (Event Trigger) .dispatchEvent() (0) | 2021.02.02 |
| [Javascript] 기본 이벤트 삭제 event.preventDefault() (0) | 2021.02.01 |
댓글