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

2022년 11월 13일 (일) 16:41 기준 최신판

1 개요

onclick Event
onclick 이벤트

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

2 예시1: input button

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

3 예시2: button

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

인수 전달

<button id="button1" onclick="button1_click('hello');">버튼1</button>
<script>
function button1_click(s) {
	console.log( s + " 버튼을 누르셨습니다.");
}
</script>

4 같이 보기

5 참고

@@ 6번째 줄: / 6번째 줄: @@
 ==예시1: input button==
-<source lang='html5'>
+<syntaxhighlight lang='html5' run>
 <input type="button" id="button1" onclick="button1_click();" value="버튼1" />
 <script>
 function button1_click() {
-	alert("버튼1을 누르셨습니다.");
+	console.log("버튼1을 누르셨습니다.");
 }
 </script>
-</source>
+</syntaxhighlight>
-<jsfiddle>zmLqsLk4</jsfiddle>
 ==예시2: button==
-<source lang='html5'>
+<syntaxhighlight lang='html5' run>
 <button id="button1" onclick="button1_click();">버튼1</button>
 <script>
 function button1_click() {
-	alert("버튼1을 누르셨습니다.");
+	console.log("버튼1을 누르셨습니다.");
 }
 </script>
-</source>
+</syntaxhighlight>
-<jsfiddle>8o1yg8u2</jsfiddle>
+* 인수 전달
+<syntaxhighlight lang='html5' run>
+<button id="button1" onclick="button1_click('hello');">버튼1</button>
+<script>
+function button1_click(s) {
+	console.log( s + " 버튼을 누르셨습니다.");
+}
+</script>
+</syntaxhighlight>
 ==같이 보기==
@@ 33번째 줄: / 41번째 줄: @@
 *[[자바스크립트 이벤트]]
-==참고 자료==
+==참고==
 *http://www.w3schools.com/jsref/event_onclick.asp
 *http://www.w3schools.com/tags/ev_onclick.asp