[Javascript/Jquery] 자바스크립트 onclick 이벤트 리스너 설명 및 소스(초간단)

안녕하세요.

오늘은 자바스크립트 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