안녕하세요.
오늘은 자바스크립트 onclick 이벤트에 대해서 설명드리겠습니다.
- onclick 동작방식
● 이벤트가 발생시 실행될 함수를 만들어줍니다.
● 엘리먼트(Element)에 onclick 이벤트를 명시해줍니다.
● 엘리먼트(Element)를 클릭할 경우 이벤트가 발생됩니다.
- 소스 설명
<화면 이미지>
↓ 화면 구성 소스
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<html>
<head>
<script>
// 성명을 클릭 했을때 동작하는 함수
function inp1Click(){
// alert 창에 '홍길동'이라는 텍스트 표출
alert($("#inp1").val());
// 'inp2'라는 아이디를 가진 엘리먼터의 값을'남성'에서 '여성'으로 변경.
$("#inp2").val("여성");
// alert 창에 '여성'이라는 텍스트 표출
alert($("#inp2").val());
}
// 성별을 클릭 했을때 동작하는 함수
function inp2Click(){
// 위에서 'inp2'id를 가진 엘리먼트의 value를 '여성'으로 변경 하여서 alert에 여성으로 표출
alert($("#inp2").val());
// 'inp1'라는 아이디를 가진 엘리먼터의 값을'홍길동'에서 '김철수'으로 변경.
$("#inp1").val("김철수");
// alert 창에 '김철수'라는 텍스트 표출
alert($("#inp1").val());
}
</script>
</head>
<body>
<div>
<section>
<div>
<article>
<div>
<h2>설명 입니다.</h2>
<dl>
<dt>성명</dt>
<dd>
<label for="inp1" class="inputLb">
<input type="text" id="inp1" onclick="inp1Click()" value="홍길동"/>
</label>
</dd>
</dl>
<dl>
<dt>성별</dt>
<dd>
<label for="inp1" class="inputLb">
<input type="text" onclick="inp2Click()" id="inp2" value="남성" />
</label>
</dd>
</dl>
</div>
</article>
</div>
</section>
</div>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
★ 소스순서 및 상세 설명
● 'inp1Click'라는 함수와 'inp2Click'라는 함수를 생성합니다.
● 'inp1'라는 id를 가진 input 엘리먼트(Element)에 onclick 리스너에 위에서 선언한 'inp1Click' 함수를 넣습니다.
● 똑같이 'inp2'라는 id를 가진 input 엘리먼트(Element)에 onclick 리스너에 위에서 선언한 'inp2Click' 함수를 넣습니다.
● 화면에서 'inp1'라는 엘리먼트를 클릭하면 'inp1Click'함수가 동작하며 'inp2'를 클릭하면 'inp2Click' 함수가 동작합니다.
- 글을 마치며
지금까지 onclick 리스너에 대해서 알아 보았는데요. 조금 허접한 설명이지만 글을 보시는분들에게 조금이라도 도움이 되었으면 좋겠습니다.
따로 궁금한사항 있으시면 댓글 남겨주시면 답변 드리겠습니다.
감사합니다.
'JavaScript' 카테고리의 다른 글
| [Jquery] 제이쿼리 텍스트 변경 .text() .html() (예제포함) (0) | 2020.02.19 |
|---|---|
| [Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단) (1) | 2020.02.14 |
| 자바스크립트(JavaScript)란 무엇이며 특징 및 장단점(기초) (0) | 2020.02.12 |
| [ Jquery ] 제이쿼리 addClass(), removeClass() 설명 및 예제(간단) (0) | 2020.02.04 |
| [Jquery] 제이쿼리 오브젝트(object) 클래스 이름 가져오기, 클래스 데이터 추출 (0) | 2020.02.03 |
