이벤트 객체 메소드
preventDefault(): 현재 이벤트의 기본 동작 중지stopPropagation(): 상위 element로 이벤트가 전파되는 것 중지stopImmediatelyPropagation(): 현재 이벤트의 다른 리스너 중지 및 상위로 전파되는 것 중지
(1) preventDefault()
return false
- jQuery에서는
preventDefault()+stopPropagation()
- JavaScript 에서는
preventDefault()
HTML 요소의 기본 동작
<a> 태그 클릭 시
- href 속성에 지정된 url로 이동
document에서 오른쪽 마우스 클릭 시
- contextmenu (팝업메뉴) 출력
preventDefault.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* <a> 태그의 기본 동작(url로 이동) 중지 */
$('#link').on('click', function(e){
e.preventDefault();
alert("일시적 이동 중지");
});
// 문서 상에서 오른쪽 마우스 클릭했을 때 기본동작 중지
document.oncontextmenu = function(e){
e.preventDefault();
alert("오른쪽 마우스 클릭 금지");
// return false; 해도 됨
}
});
</script>
</head>
<body>
<!-- <a> 태그는 클릭하면 href 속성에 지정된 url로 이동하는 기본 동작 수행 -->
<a href="naver.com" id="link">네이버로 이동</a>
</body>
</html>이벤트 전파(Propagation)
자식 요소에서 발생한 이벤트가 부모 요소에까지 전파되는 것
이벤트 버블링
<div id="parent"><div id="child">자식</div></div>자식 <div>를 클릭했는데, 부모 <div> 클릭 이벤트 발생
stopPropagation(): 상위 요소로 이벤트가 전파되는 것 중지
stopPropagation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
#parent {border: solid 1px blue;}
#child {border: solid 1px red; width: 20%;}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// child 영역 제외한 paretn 클릭 -> parent만 발생
$('#parent').on('click', function(){
alert("paretn");
});
// 현재 child 클릭 -> child/parent 2개 이벤트 발생
$('#child').on('click', function(e){
e.stopPropagation();
alert("child");
})
});
</script>
</head>
<body>
<div id="parent">
<div id="child">클릭</div>
</div>
</body>
</html>stopImmediatelyPropagation(): 현재 이벤트의 다른 리스너 중지 및 상위로 전파되는 것 중지- 하나의 버튼에 3개의 이벤트 핸들러 작성
- 3개의 이벤트 리스너 수행
stopImmediatelyPropagation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 현재 3개의 이벤트 리스너 수행
$('#btn').on('click', function(e){
// click1 이벤트만 수행되게
// 다른 리스너 중지 및 상위로 전파되는 것 중지
e.stopImmediatePropagation();
alert('click1');
});
$('#btn').on('click', function(){
alert('click2');
});
$('#btn').on('click', function(){
alert('click3');
});
});
</script>
</head>
<body>
<button id="btn">클릭</button>
</body>
</html>'Front > jQuery' 카테고리의 다른 글
| jQuery - DOM 요소의 속성 추가 및 삭제 (0) | 2021.12.15 |
|---|---|
| jQuery - DOM 요소 조작 (0) | 2021.12.15 |
| jQuery - 이벤트(키보드 이벤트, 입력 양식 이벤트) (0) | 2021.12.14 |
| jQuery - 이벤트(마우스 이벤트, 동적 이벤트) (0) | 2021.12.14 |
| jQuery - 이벤트(윈도우 이벤트) (0) | 2021.12.14 |