티스토리 뷰

[JQUERY]자바스크립트

jQuery 020. 이벤트 on(), 클릭이벤트 click()

가산동 2018. 10. 6. 15:28

아래는 예제 입니다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //클릭 >> 노랑
            var $p01 = $(".p01");
            $p01.on("click",function(){
                $p01.css("color","yellow");
            });
            
            //클릭 >> 파랑
            var $p02 = $(".p02");
            $p02.click(function(){
                $p02.css("color","blue");
            })
 
        });
        
    </script>
</head>
    <body>
        <div style="border: 1px solid black">
            <p class="p01">클릭하면 노랑</p>
            <p class="p02">클릭하면 파랑</p>
        </div>
    </body>
</html>
cs


아래는 실행 화면입니다. 실제 작동되니 클릭해보세요.


클릭하면 노랑

클릭하면 파랑


이벤트 종류는 여러가지가 있지만 이번 예제에서는 클릭이벤트 click 에 대해서만 보겠습니다.



예제를 라인별로 보겠습니다.

먼저 html의 body 부터 보겠습니다.

26
27
28
29
30
31
    <body>
        <div style="border: 1px solid black">
            <p class="p01">클릭하면 노랑</p>
            <p class="p02">클릭하면 파랑</p>
        </div>
    </body>
cs

라인 27.    div의 style 에 border를 줍니다. 위 실행 화면 처럼 검은색라인이 생깁니다. 

라인 28.    p태그를 생성합니다. class는 p01 입니다. 클릭 이벤트로 color를 노랑색으로 변경하겠습니다.

라인 29.    p태그를 생성합니다. class는 p02 입니다. 클릭 이벤트로 color를 파랑색으로 변경하겠습니다.


10
11
12
13
14
            //클릭 >> 노랑
            var $p01 = $(".p01");
            $p01.on("click",function(){
                $p01.css("color","yellow");
            });
cs

라인 11.    $p01 에 첫번째 p태그를 담아줍니다.

   선택자에 대한 예제는 아래링크를 참조해주세요

   >>[[JQUERY]자바스크립트] - jQuery 018. jquery 선택자 (tag,id,class,name)

라인 12.    $p01 에 클릭이벤트를 추가해줍니다. 이벤트를 추가하는 방법중 하나인 on()을 사용합니다.

   on()의 사용방법은 .on("추가할이벤트","실행할 함수") 방식입니다.

   function(), 함수의 예제는 아래링크를 참조해주세요.

   >>[[JQUERY]자바스크립트] - jQuery 009. 함수 function

라인 13.    클릭이 발생 했을때 실행됩니다. $p01 을 css()를 활용해 color를 yellow로 변경합니다.

   jquery css변경 예제는 아래링크를 참조해주세요.

   >>[[JQUERY]자바스크립트] - jQuery 019. css 변경하기 css()


16
17
18
19
20
            //클릭 >> 파랑
            var $p02 = $(".p02");
            $p02.click(function(){
                $p02.css("color","blue");
            })
cs

라인 17.   이번엔 $p02 에 두번째 태그를 담아줍니다.

라인 18    위와는 다르게 .click()을 활용해서 이벤트를 추가해주었습니다.

   .click()의 사용방법은 .click("실행할 함수") 입니다. 

라인 19.    이번엔 클릭이벤트시에 $p02의 color를 blue로 변경합니다.

저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 022. 논리 연산자 AND(&&), OR(||)  (0) 2018.10.06
jQuery 021. 비교연산자 >,<,>=,<=,==,!=  (0) 2018.10.06
jQuery 019. css 변경하기 css()  (0) 2018.10.06
jQuery 018. jquery 선택자 (tag,id,class,name)  (0) 2018.10.03
jQuery 017. 실수를 문자로 형변환, 반올림 toFixed()  (0) 2018.10.03
댓글