본문 바로가기
Web/jQuery

[JQuery 기본 개념] JQuery문법-Event / .on()

by 나비와꽃기린 2016. 6. 23.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1.1  Event

-시스템에서 일어나는 사건을 의미

-javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다.

à 클릭, 마우스 이동, 타이핑, 페이지 로딩등을 했을 때 사건이 일어나는데 그것을 Event라 한다.

-이벤트가 발생하면 시스템에게 알려두었던 로직이 호출된다.

 

* JQuery의 이벤트

-크로스브라우징의 문제를 해결해줌

-click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공

-live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있

(jQuery 1.7이후 부터 live()함수를 사용하지 않고 .on()으로 대체되었다)

-bind로 이벤트 핸들러를 설치하고, unbind로 제거 (예제1)

-trigger로 이벤트 핸들러를 강제로 실행

 

Ex)

<html>

    <head>

 <script type="text/javascript"

 src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            function clickHandler(e){

                alert('thank you');

            }

            $(document).bind('ready', function(){

                 $('#click_me').bind('click', clickHandler);

                 $('#remove_event').bind('click', function(e){

$('#click_me').unbind('click', clickHandler);

});

                 $('#trigger_event').bind('click', function(e){

$('#click_me').trigger('click');

});

             })

        </script>

    </head>

    <body>

        <input id="click_me" type="button" value="click me" />

        <input id="remove_event" type="button" value="unbind" />

        <input id="trigger_event" type="button" value="trigger" />

    </body>

</html>

 

 

2.4.1 on 메서드

-jQuery로 이벤트를 연결하는 가장 기본적인 방법

-사용방법

 1. $(selector).on(eventName,function(event){})

 2. $(selector).on(object)

 

Ex)

$(document).ready(function(){

                 $(‘H1').on('click', function(){

                 $(this).html(function(index,html){

                    Return html + ‘+’;

});

});

}):

 

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

'Web > jQuery' 카테고리의 다른 글

[jQuery] datepicker 예제  (0) 2016.07.20
[jQuery Plugin] ALS(any list scroller) / 슬라이드 플러그인  (0) 2016.07.07
[JQuery 기본 개념] JQuery문법-Chain기법이란?  (0) 2016.06.23
[JQuery 기본 개념] JQuery문법-css Selecotor/속성을 활용한 Selector 종류  (0) 2016.06.23
[JQuery 기본 개념] JQuery문법-$/Selector/CSS Selector  (0) 2016.06.23

관련글

티스토리툴바