이벤트 전파
각 요소가 서로 포함관계(중첩)인 경우 요소 중 하나에 이벤트가 발생하면 중첩된 요소에 이벤트가 전파된다.
1. 이벤트 전파 막기
1) stopPropagation(): 이벤트 요소 전파 막기
2) preventDefault(): 이벤트에 의한 기본 동작 막기
3) return false : 둘다 적용(이벤트 전파막기 + 기본 동작 막기)
2. 연습코드(body)
아래 코드를 보면 div 안에 p 안에 a 태그 순으로 놓여 있다.
이때 div, p, a 태그 각각에 이벤트가 걸려 있다면 a의 클릭만 누르더라도
div p a 각각의 이벤트가 모두 실행이 될 것이다.
이를 막기 위한 것이 이벤트 전파 막기 이며 아래 script에서 자세히 살펴볼 수 있다.
<body>
<span>unbind(): 이벤트 해제</span>
<div>
<p>
<a href="https://www.naver.com">클릭</a>
</p>
<p>클릭</p>
</div>
<div>
<p>
<a href="https://www.google.com">클릭</a>
</p>
<p>클릭!</p>
</div>
<button>요소 추가</button>
</body>
3. script
아래와 같이 div p a 각각에 이벤트가 걸려있는 경우
1) a를 눌렀을 때 a 이벤트만 실행되도록 원한다면 return false
2) p 또는 div 태그로 넘어가길 원하지 않는다면 stopPropagation();
3) a의 원래 이벤트가 실행되지 않도록 하려면 preventDefault(); 를 사용할 수 있다.
<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){ //e : 클릭 event
alert("naver click");
//e.stopPropagation(); //p tag로 넘어가지 않는다.
//e.preventDefault(); //this의 원래 event로 넘어가지 않는다.
return false; //event동작 X(링크연결) + p div tag 연결X
});
$("a:eq(1)").click(function(){
alert("event off");
return false;
});
$("p").click(function(){
alert("p click");
});
$("div").click(function(){
alert("div click");
});
</script>
+이벤트 연결: .on
.click(function(){...});대신 아래와 같이 연결할 수 있다.
<script type="text/javascript">
// 이벤트 연결
$("body").on("click"," p", function(){
alert("new p click");
});
</script>
추가적으로 Bind와 unbind를 살펴보자.
bind는 bind({이벤트},{이벤트});의 구조로 사용할 수 있고, 해제할 경우 .unbind();를 사용한다.
<script type="text/javascript">
$("a:eq(1)").bind({
"mouseover": function(){
$(this).css("background","gray");
},
"mouseout": function(){
$(this).css("background","");
}
});
$("span").click(function(){
alert("span click");
4("a:eq(1)").unbind();
});
</script>
또한 위의 코드 중 mouseover/ mouseout 대신에 hover를 사용하여 아래와 같이 작성할 수 있다.
<script type="text/javascript">
$("a").hover(function(){
$(this).css("background","yellow");
},
function(){
$(this).css("background", "");
});
</script>
※ .append: 작성한 tag내용이 해당 파트 뒤에 가서 붙는다.
$("button").click(function(){
$("body").append("<p>새로 추가된 p tag</p>");
});
'Web > JQuery' 카테고리의 다른 글
| [JQ]effect_02 (0) | 2020.08.03 |
|---|---|
| [JQ]effect_01 (0) | 2020.08.03 |
| [JQ]DOM_기타탐색메소드 (0) | 2020.07.31 |
| [JQ]DOM_트리탐색메소드 (0) | 2020.07.31 |
| [JQ]DOM_필터링메소드 (0) | 2020.07.31 |
