jQuery EVENT Bubbling , this
2021. 12. 7. 13:21ㆍStudy/jQuery
이벤트 동시에 발생 문제 (event bubbling)
var header = $('h1', this).text();
var paragraph = $('p', this).text();
- this키워드를 $()메소드의 두번째 매개 변수로 넣어준다. 범위를 이벤트 발생 객체로 한정한다.
- 이벤트 발생 객체 안에만 선택자를 적용할 수 있다.
- 쉽게 말해 이벤트를 제공 받은 그 해당 객체(this)의 자식 객체 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q&A</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6; margin: 20px;}
a{color:inherit; text-decoration:none;}
img{vertical-align:top;}
div{width:200px; margin:5px; padding:3px; border:1px solid red;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
// // ERROR : div를 모두 클릭 하기 때문에 3가지씩 출력됨
// $('div').click(function () {
// var header = $('h1').text(); // text값 리턴
// var paragraph = $('p').text();
// alert(header + '\n' + paragraph);
// });
// ERROR : div를 모두 클릭 하기 때문에 3가지씩 출력됨
$('div').click(function () {
var header = $('h1', this).text(); // text값 리턴
var paragraph = $('p', this).text();
alert(header + '\n' + paragraph);
});
// // 이렇게 구리게 할 수도 있다
// $('.d1').click(function(){
// var header = $('.d1 h1').text();
// var paragraph = $('.d1 p').text();
// alert(header + '\n' + paragraph);
// });
// $('.d2').click(function(){
// var header = $('.d2 h1').text();
// var paragraph = $('.d2 p').text();
// alert(header + '\n' + paragraph);
// });
// $('.d3').click(function(){
// var header = $('.d3 h1').text();
// var paragraph = $('.d3 p').text();
// alert(header + '\n' + paragraph);
// });
});
</script>
</head>
<body>
<div class="d1">
<h1>Header 1</h1>
<p>Paragraph 1</p>
</div>
<div class="d2">
<h1>Header 2</h1>
<p>Paragraph 2</p>
</div>
<div class="d3">
<h1>Header 3</h1>
<p>Paragraph 3</p>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 간단 갤러리 index (0) | 2021.12.07 |
|---|---|
| jQuery 시각효과 (0) | 2021.12.07 |
| jQuery toogle 더보기 (0) | 2021.12.07 |
| jQuery attr() 속성변경 (0) | 2021.12.07 |
| jQuery toggle(), hover() (0) | 2021.12.07 |
