Web/JavaScript
[days01] event.srcElement 속성
다연
2020. 12. 9. 23:26
반응형
버튼을 누르면 해당 버튼이 사라진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p{
border: 1px solid gray;
width: 200px;
text-align: center;
text-transform: uppercase;
}
p:hover{
background: grey;
color: white;
}
</style>
</head>
<body>
<p onclick="p_hide();">test- 1 </p>
<p onclick="p_hide();">test- 2 </p>
<p onclick="p_hide();">test- 3 </p>
<p onclick="p_hide();">test- 4 </p>
<p onclick="p_hide();">test- 5 </p>
<script>
//p태그를 클릭하면 해당 p태그 숨기기
function p_hide() {
// 이벤트를 받은 객체 : event.srcElement 속성
event.srcElement.style.display="none";
}
</script>
</body>
</html>위의 event.srcElement를 매개변수로 받아 넘겨올 수 도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p{
border: 1px solid gray;
width: 200px;
text-align: center;
text-transform: uppercase;
}
p:hover{
background: grey;
color: white;
}
</style>
</head>
<body>
<p onclick="p_hide( this );">test- 1 </p> <!-- this라고 자기자신 객체에 넘겨주기 -->
<p onclick="p_hide( this );">test- 2 </p>
<p onclick="p_hide( this );">test- 3 </p>
<p onclick="p_hide( this );">test- 4 </p>
<p onclick="p_hide( this );">test- 5 </p>
<script>
//p태그를 클릭하면 해당 p태그 숨기기
function p_hide(obj) { //this를 obj로 받음
// 이벤트를 받은 객체 : event.srcElement 속성
obj.style.display="none";
}
</script>
</body>
</html>
이를 jQuery로 바꿔본다면 훨씬 간단해진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p{
border: 1px solid gray;
width: 200px;
text-align: center;
text-transform: uppercase;
}
p:hover{
background: grey;
color: white;
}
</style>
<script>
$(document).ready(function() {
$("p").click(function() {
// this element $(this) jquery Object
console.log($(this).text()); //test01 02 누구 찍었는지 뜬다
$(this).hide();
});
});
</script>
</head>
<body>
<!-- jQuery로 바꾸기 -->
<p>test- 1 </p>
<p>test- 2 </p>
<p>test- 3 </p>
<p>test- 4 </p>
<p>test- 5 </p>
</body>
</html>
반응형