블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

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

Category

Recent Post

Recent Comment

Archive

2009. 11. 12. 14:16 .Net Project/Jquery 1.3.2
반응형

 Trigger.htm
소스 설명 )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>동적으로 이벤트 호출 </title>

    <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //[1] btn클릭시 이벤트 처리
                        $('#btn').click(function () {

                            alert('버튼 클릭');

 

                        });

            //[2]페이지 로드시 버튼 클릭
                        $('#my .hover').click(function () {

                            alert('test');

                        });

            //[3]세번째 방식 버튼 클릭시

            $('#my input[type=button]').one("click", function () {

                alert("역시 버튼이 사용자에 의해서 클릭")

            });

        });

            //[4]번째 방식의 bind 메서드 적용

            $('#btn').bind("click", function () {

                alert("4번째 방식버튼 클릭 입니다 ")

            });

            //[i] 페이지의 로드시 사용자 아닌 코드에 의해서 이벤트 발생

            $('#btn').trigger("click"); //실행하자마자 Click 이벤트 트리거

    </script>

</head>

<body>

    <div id="my">

        <input type="button" id="btn" value="" class="hover" />

     </div>

</body>

</html> 



 EventTrigger.htm
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <script src="../../jquery-1[1].3.2-vsdoc2.js"
            type
="text/javascript"></script>

 

  <script>

      $(document).ready(function () {

          //첫번째 버튼 클릭시

          $("button:first").click(function () {

              update($("span:first"));

          });
          //두번째 버튼 클릭시

          $("button:last").click(function () {

              $("button:first").trigger('click');

 

              update($("span:last"));

          });

 

          function update(j) {

              var n = parseInt(j.text(), 10);

              j.text(n + 1);

          } 

      });

  </script>

 

  <style>

         button { margin:10px; }

         div { color:blue; font-weight:bold; }

         span { color:red; }

  </style>

 

</head>

<body>

  <button>Button #1</button>

  <button>Button #2</button>


 
<div><span>0</span> button #1 clicks.</div>

  <div><span>0</span> button #2 clicks.</div>

</body>

</html> 








반응형
posted by Magic_kit