이벤트 처리 제어 메서드
preventDefault()
- 기능: 이벤트의 기본 동작을 방지합니다. 예를 들어, 링크를 클릭했을 때 페이지 이동을 막거나, 폼 제출을 방지하는 데 사용됩니다.
- 사용 예: 주로 <a> 태그나 <form> 태그와 같은 요소의 기본 동작을 막을 때 사용합니다.
- 이벤트 전파: preventDefault()는 이벤트가 상위 요소로 전파되는 것에는 영향을 주지 않습니다. 이벤트는 계속해서 부모 요소로 버블링됩니다.
stopPropagation()
- 기능: 이벤트가 상위 요소로 전파되는 것을 막습니다. 즉, 이벤트가 부모 요소에 전달되지 않도록 차단합니다.
- 장점: 특정 이벤트만 처리하고 싶을 때, 다른 이벤트 리스너가 실행되지 않도록 제어할 수 있습니다.
return false
- 기능: 이벤트의 기본 동작을 방지하는 것과 더불어, 이벤트 전파도 중단합니다. 즉, return false를 사용하면 preventDefault()와 stopPropagation()을 동시에 수행하는 효과가 있습니다.
- 사용 예: jQuery와 같은 라이브러리에서 자주 사용되며, HTML 이벤트 핸들러에서 직접 사용될 수 있습니다.
- 이벤트 전파: return false를 사용하면 현재 이벤트의 전파를 중단시키므로, 부모 요소에 등록된 이벤트 핸들러가 실행되지 않습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>preventDefault()와 stopPropagation() 예제</title>
<style>
#parent {
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="parent">
<p>부모 요소 (클릭하면 "부모가 클릭됨" 메시지가 나옵니다)</p>
<a href="https://www.example.com" id="link">링크 클릭 (기본 동작을 방지)</a>
<button id="button">버튼 클릭 (이벤트 전파를 막음)</button>
</div>
<script>
const link = document.getElementById('link');
const button = document.getElementById('button');
const parent = document.getElementById('parent');
// 링크 클릭 시 기본 동작 방지
link.addEventListener('click', function(event) {
event.preventDefault(); // 링크 클릭 시 페이지 이동 방지
console.log('링크 클릭됨! 기본 동작이 방지되었습니다.');
});
// 버튼 클릭 시 이벤트 전파 방지
button.addEventListener('click', function(event) {
event.stopPropagation(); // 이벤트 전파 방지
console.log('버튼 클릭됨! 부모 요소로 이벤트가 전파되지 않음.');
});
// 부모 요소 클릭 이벤트
parent.addEventListener('click', function() {
console.log('부모가 클릭됨!');
});
</script>
</body>
</html>설명
- HTML: 부모 요소와 링크, 버튼을 생성했습니다.
- JavaScript:
- 링크 클릭 시 preventDefault()를 사용하여 페이지 이동을 방지합니다.
- 버튼 클릭 시 stopPropagation()을 사용하여 부모 요소의 클릭 이벤트가 발생하지 않도록 막습니다.
- 부모 요소에 클릭 이벤트 리스너를 추가하여, 그 자체로 클릭할 경우 메시지를 출력합니다.
실행 결과
- 링크를 클릭하면 "링크 클릭됨! 기본 동작이 방지되었습니다." 메시지가 출력되고 페이지는 이동하지 않습니다.
- 버튼을 클릭하면 "버튼 클릭됨! 부모 요소로 이벤트가 전파되지 않음." 메시지가 출력되고, 부모 요소의 클릭 이벤트는 실행되지 않습니다.
- 부모 요소를 클릭하면 "부모가 클릭됨!" 메시지가 출력됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>return false와 preventDefault() 예제</title>
<style>
#parent {
padding: 20px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="parent">부모 요소
<a href="https://www.example.com" id="link">링크 클릭 (preventDefault)</a>
<button id="button">버튼 클릭 (return false)</button>
</div>
<script>
const link = document.getElementById('link');
const button = document.getElementById('button');
const parent = document.getElementById('parent');
// preventDefault() 사용
link.addEventListener('click', function(event) {
event.preventDefault(); // 링크의 기본 동작을 방지
console.log('링크 클릭됨! 기본 동작이 방지되었습니다.');
});
// return false 사용
button.addEventListener('click', function() {
console.log('버튼 클릭됨! 기본 동작이 방지되고 부모 이벤트가 발생하지 않음.');
return false; // 기본 동작 방지 및 이벤트 전파 중단
});
// 부모 요소 클릭 이벤트
parent.addEventListener('click', function() {
console.log('부모 요소 클릭됨!');
});
</script>
</body>
</html>실행 결과
- 링크 클릭: "링크 클릭됨! 기본 동작이 방지되었습니다." 메시지가 출력되고, 페이지는 이동하지 않습니다. 부모 요소의 클릭 이벤트는 계속해서 발생합니다.
- 버튼 클릭: "버튼 클릭됨! 기본 동작이 방지되고 부모 이벤트가 발생하지 않음." 메시지가 출력되며, 부모 요소의 클릭 이벤트는 발생하지 않습니다.
요약
- preventDefault(): 기본 동작을 방지하지만, 이벤트 전파는 계속됩니다.
- return false: 기본 동작을 방지하고, 이벤트 전파를 중단합니다.
'JAVASCRIPT' 카테고리의 다른 글
| window 객체 (0) | 2024.10.30 |
|---|---|
| 버블링이란? (0) | 2024.10.30 |
| 이벤트 객체 (0) | 2024.10.30 |
| 객체란? (0) | 2024.10.24 |
| javascript class (0) | 2024.10.23 |