위키
포럼
도구
바뀐글
랜덤

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

잔글 (Jmnote 사용자가 Onclick 문서를 자바스크립트 onclick 이벤트 문서로 옮겼습니다)
잔글 ("자바스크립트 onclick 이벤트" 문서를 보호했습니다 ([편집=자동 인증된 사용자만 허용] (무기한) [이동=자동 인증된 사용자만 허용] (무기한)))
 
(사용자 24명의 중간 판 75개는 보이지 않습니다)
1번째 줄: 1번째 줄:
{{소문자}}
==개요==
;onclick Event
;onclick 이벤트
*클릭시 발생하는 이벤트
*클릭시 자바스크립트 수행


==자바스크립트==
==예시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://jmnote.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://jmnote.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>
</script>
</body>
</syntaxhighlight>
</html>
</source>
*예제: http://jmnote.com/jq/onclick01.php


===button===
==같이 보기==
<source lang='html5'>
*[[HTML button]]
<!DOCTYPE html>
*[[jQuery click 이벤트]]
<meta charset="utf-8" />
*[[자바스크립트 addEventListener]]
<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>
</source>
*예제: http://jmnote.com/jq/onclick02.php


==같이 보기==
==참고==
*[[jQuery 버튼]]
*http://www.w3schools.com/jsref/event_onclick.asp
*http://www.w3schools.com/tags/ev_onclick.asp


[[분류:JavaScript]]
[[분류:JavaScript]]

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 }}