![[jQuery] 이벤트 전파( stopPropagation(), preventDefault(), return false )](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcdRKHv%2FbtrmTbTdUPJ%2FQKs2qh6ODscxYvHJSIFhC1%2Fimg.jpg)
이벤트 전파 : 각 요소가 서로 포함관계(중첩)인 경우 요소 중 하나에 이벤트가 발생하면 중첩된 요소들도 이벤트가 전파된다.
이벤트 전파 막기
- stopPropagation() : 이벤트 요소의 전파막기
- preventDefault() : 이벤트에 의한 기본 동작 막기
- return false : 위의 기능 두개 모두 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{width: 400px; height: 200px; border: 2px solid red; padding: 20px; overflow: auto;}
div p:first-child{float: left; border: 1px solid blue; width: 150px; height: 150px; text-align: center; line-height: 150px;}
div p:last-child{float: right; border: 1px solid blue; width: 150px; height: 150px; text-align: center; line-height: 150px;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a:eq(0)").click(function(e){
alert("a click!");
//e.stopPropagation();
//e.preventDefault();
return false;
});
$("p").click(function(e){
alert("p click!");
//e.stopPropagation();
});
$("div").click(function(e){
alert("div click!");
});
$("a:eq(0)").bind("mouseover mouseout", function(e){
if(e.type == "mouseover"){
$(this).css("background-color", "skyblue");
}
if(e.type == "mouseout"){
$(this).css("background-color","");
}
})
$("a:eq(1)").bind({
"mouseover":function(){
$(this).css("background-color","hotpink");
},
"mouseout":function(){
$(this).css("background-color","");
}
});
$("span").click(function(){
$("a:eq(1)").unbind();
});
$("button").click(function(){
$("body").append("<p>새로 추가된 p</p>");
});
$("body").on("click", "p", function(){
alert("new p!");
});
});
</script>
</head>
<body>
<span>unbind() : 이벤트 해제</span>
<div>
<p>
<a href="http://www.naver.com">naver</a>
</p>
<p>클릭</p>
</div>
<div>
<p>
<a href="http://www.daum.net">daum</a>
</p>
<p>클릭</p>
</div>
<button>요소 추가</button>
</body>
</html>
$("a:eq(0)").click(function(e){
alert("a click!");
//e.stopPropagation();
//e.preventDefault();
return false;
});함수 안에서 첫번째 a태그를 클릭하면 a click! 이라는 메세지가 나오고 원래는 연결된 링크로 이동해야하지만 return false; 를 만나 이벤트를 종료시킵니다.
만약 return false;가 없다면 네이버로 이동이 될것입니다!
$("p").click(function(e){
alert("p click!");
//e.stopPropagation();
});
$("div").click(function(e){
alert("div click!");
});p태그와 div태그도 각 영역을 클릭하면 메세지가 출력되도록 설정해 놓았습니다.
p영역을 클릭해볼까요??
클릭 이라는 텍스트를 클릭하였습니다.
daum을 클릭하면 어떻게 될까요?
모든 메세지를 출력시키고 <a>태그에 있는 기본 이벤트인 다음으로 이동시킵니다.
하지만 만약 e.stopPropagation();가 주석처리 되어있지 않고 활성화 되어있다면?
클릭 버튼을 누르니까 alert명령 이후의 모든 전파를 막아버립니다!
daum버튼을 누르니 이런 결과가 나오네요!
그럼 이번엔 e.stopPropagation();을 주석처리하고 preventDefault();를 추가해보겠습니다!
모든 메세지가 출력이 되었으나 사이트 이동은 하지 않았습니다.
stopPropagation()라는 명령을 받으면 이 이후의 모든 이벤트를 막지만 a태그에 걸려있는 기본이벤트는 막지 못합니다.
preventDefault()의 경우에는 기본이벤트를 막습니다.
return false; 의경우에는 이후 이벤트도 막으면서 기본이벤트로 막습니다!
차이 구분가시나요?!
'JS 관련 > JQuery' 카테고리의 다른 글
| [jQuery] 이펙트 메서드( animate() ) (0) | 2022.02.19 |
|---|---|
| jQuery] 이펙트 메서드( slide, fade, animate ) (0) | 2022.02.18 |
| [jQuery] DOM탐색 메서드 (0) | 2022.02.16 |
| [jQuery] add(), is() (0) | 2022.02.15 |
| [jQuery] find(), children(), parent(), next() (0) | 2022.02.14 |