[개인 코드 저장소] div태그, input태그 click 이벤트

1. 목표

아래의 div태그와 input태그를 눌렀을때 경고창이 뜨도록 하는 것.

<div> 테스트 대상 </div>
<input> 테스트 대상 </input>

 

2. 자바스크립트

대상

<div onclick="div_click()"> 테스트 대상 </div>
<input onclick="input_click()"> 테스트 대상 </input>

자바스크립트 코드

<script>
function div_click(){
	alert("div 클릭");
}

function div_click(){
	alert("input 클릭");
}
</script>

 

 

3. 제이쿼리

대상

<div id="div_id" class="div_class"> 테스트 대상 </div>
<input id="input_id" class="input_class"> 테스트 대상 </input>

 

제이쿼리

<script>
$( document ).ready( function() {

  $("#div_id").click(function(){
      alert("div id 클릭");
  });

  $(".div_class").click(function(){
      alert("div class 클릭");
  });



  $("#input_id").click(function(){
      alert("input id 클릭");
  });

  $(".input_class").click(function(){
      alert("input class 클릭");
  });

} );

</script>