위키
포럼
도구
바뀐글
랜덤

"자바스크립트 onclick 이벤트"의 두 판 사이의 차이

39번째 줄: 39번째 줄:
===input button===
===input button===
<source lang='html5'>
<source lang='html5'>
<!DOCTYPE html>
<script src="//code.jquery.com/jquery.min.js"></script>
<meta charset="utf-8" />
 
<head>
<title>onclick 예제 1</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
</head>
<body>
<input type='button' id="button1" value='버튼1'/>
<input type='button' id="button1" value='버튼1'/>
<script type="text/javascript">
 
<script>
$("#button1").click(function() {
$("#button1").click(function() {
alert("버튼1을 누르셨습니다.");
alert("버튼1을 누르셨습니다.");
});
});
</script>
</script>
</body>
</html>
</source>
</source>
*예제: http://zetawiki.com/ex/jquery/onclick01.php
*예제: http://zetawiki.com/ex/jquery/onclick01.php

2016년 2월 3일 (수) 21:33 판

1 개요

onclick Event
onclick 이벤트
  • 클릭시 발생하는 이벤트
  • 클릭시 자바스크립트 수행

2 자바스크립트

2.1 input button

<input type="button" id="button1" onclick="button1_click();" value="버튼1" />
<script>
function button1_click() {
	alert("버튼1을 누르셨습니다.");
}
</script>

2.2 button

<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>onclick 예제 2</title>
</head>
<body>
<button id="button1" onclick="button1_click();">버튼1</button>
<script type="text/javascript">
function button1_click() {
	alert("버튼1을 누르셨습니다.");
}
</script>
</body>
</html>

3 jQuery

3.1 input button

<script src="//code.jquery.com/jquery.min.js"></script>

<input type='button' id="button1" value='버튼1'/>

<script>
$("#button1").click(function() {
	alert("버튼1을 누르셨습니다.");
});
</script>

3.2 button

<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>onclick 예제 2</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
</head>
<body>
<button id="button1">버튼1</button>
<script type="text/javascript">
$("#button1").click(function() {
	alert("버튼1을 누르셨습니다.");
});
</script>
</body>
</html>

4 같이 보기

5 참고 자료

원본 주소 "https://zetawiki.com/w/index.php?title=자바스크립트_onclick_이벤트&oldid=172092"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}