다연이네

[days01] event.srcElement 속성 본문

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>

 

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days02] 문제  (0) 2020.12.10
[days01] 버튼으로 전구 켜고끄기  (0) 2020.12.09
[days01] x.innerHTML == $("#").html($("#").val())와 jQuery의 if문  (0) 2020.12.09
[days01] 버튼 누르면 border 스타일 변경  (0) 2020.12.09
[days01] tabindex, accesskey  (0) 2020.12.09
'Web/JavaScript' Related Articles more
Comments