[J] JavaScript & jQuery 공부하기 #28

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

33. 이벤트 연결

* 이벤트

  - 마우스를 해당 객체에 올리거나 클릭, 또는 키보드를 치는 등의
    브라우저에서 발생하는 모든 동작을 의미
  - 주요 메소드
    mouseup : function(){}
    mousedown : function(){}
    mouseenter : function(){}
    mouseleave : function(){}
    click : function(){}

 * 클릭 이벤트 처리

   - 클릭 이벤트 대상이 될 요소들을 생성한다
   < body>
       < p>클릭하면 사라집니다</ p>
       < p>클릭해 보세요!</ p>
       < p>클릭!</ p>
   </ body>

   - 클릭하면 요소가 사라지면서 경고 창을 출력하는 함수를 정의함
   < script type="text/javascript">
       $(document).ready(function(){
        $("p").on("click", function(){
            $(this).hide();
            alert("글자가 사라집니다");
        });
       });
   </ script>

 * 이벤트 연결 방법

  - 마우스 이벤트의 대상이 될 요소를 생성한다
  < body>
      < p>마우스를 올리면, 내리면, 클릭하면 색이 변합니다.</ p>
  </ body>
  - mouseenter, mouseleave, click 이벤트를 이용하여
  마우스를 올렸을 때, 내렸을 때, 클릭할 때 각각 배경색을 적용하는 함수를 정의
  < script type="text/javascript">
      $(document).ready(function(){
        $("p").on({mouseenter:function(){
            $(this).css("backgorund-color","orange");
        }, mouseleave: function(){
            $(this).css("backgorund-color","tomato");
        }, click: function(){
            $(this).css("backgorund-color","yellow");
        }
       });
      });
  </ script>

  * 예제

  < script type="text/javascript">
      $(document).ready(function(){
        $("div").on({
            mouseenter: function(){
                $(this).addClass("big colorW");
            },
            mouseleave : function(){
                $(this).removeClass("big colorW");
            },
            click: function(){
                $(this).hide();
            }
        });
      });
  </ script>