위키
포럼
도구
바뀐글
랜덤

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

잔글 ("자바스크립트 onclick 이벤트" 문서를 보호했습니다 ([편집=자동 인증된 사용자만 허용] (무기한) [이동=자동 인증된 사용자만 허용] (무기한)))
 
(사용자 24명의 중간 판 69개는 보이지 않습니다)
5번째 줄: 5번째 줄:
*클릭시 자바스크립트 수행
*클릭시 자바스크립트 수행


==자바스크립트==
==예시1: input button==
===input button===
<syntaxhighlight lang='html5' run>
<source lang='html5'>
<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>onclick 예제 1</title>
</head>
<body>
<input type="button" id="button1" onclick="button1_click();" value="버튼1" />
<input type="button" id="button1" onclick="button1_click();" value="버튼1" />
<script type="text/javascript">
<script>
function button1_click() {
function button1_click() {
alert("버튼1을 누르셨습니다.");
console.log("버튼1을 누르셨습니다.");
}
}
</script>
</script>
</body>
</syntaxhighlight>
</html>
</source>
*예제: http://zetawiki.com/js/onclick01.php


===button===
==예시2: button==
<source lang='html5'>
<syntaxhighlight lang='html5' run>
<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>onclick 예제 2</title>
</head>
<body>
<button id="button1" onclick="button1_click();">버튼1</button>
<button id="button1" onclick="button1_click();">버튼1</button>
<script type="text/javascript">
<script>
function button1_click() {
function button1_click() {
alert("버튼1을 누르셨습니다.");
console.log("버튼1을 누르셨습니다.");
}
}
</script>
</script>
</body>
</syntaxhighlight>
</html>
</source>
*예제: http://zetawiki.com/js/onclick02.php


==jQuery==
* 인수 전달
===input button===
<syntaxhighlight lang='html5' run>
<source lang='html5'>
<button id="button1" onclick="button1_click('hello');">버튼1</button>
<!DOCTYPE html>
<script>
<meta charset="utf-8" />
function button1_click(s) {
<head>
console.log( s + " 버튼을 누르셨습니다.");
<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'/>
<script type="text/javascript">
$("#button1").click(function() {
alert("버튼1을 누르셨습니다.");
});
</script>
</body>
</html>
</source>
*예제: http://zetawiki.com/jq/onclick01.php
 
===button===
<source lang='html5'>
<!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>
</script>
</body>
</syntaxhighlight>
</html>
</source>
*예제: http://zetawiki.com/jq/onclick02.php


==같이 보기==
==같이 보기==
*[[HTML button]]
*[[HTML button]]
*[[jQuery 버튼]]
*[[jQuery click 이벤트]]
*[[자바스크립트 addEventListener]]
*[[자바스크립트 addEventListener]]
*[[자바스크립트 이벤트]]


==참고 자료==
==참고==
*http://www.w3schools.com/jsref/event_onclick.asp
*http://www.w3schools.com/jsref/event_onclick.asp
*http://www.w3schools.com/tags/ev_onclick.asp
*http://www.w3schools.com/tags/ev_onclick.asp

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 참고

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