TIL_220127

인프런 강의 ing..

1.jquery

• method 그룹 이벤트 등록 on()

①

$("#btn").on("mouseover focus", function(){
                console.log("이벤트 발생");
            });

②

$("#btn").on({
               "mouseover focus" : function() {
                   console.log("이벤트 발생");
              }
          });

③

$("#btn").on({
                 "mouseover" : function(){
                     console.log("이벤트 발생");
                 },
                 "focus" : function(){
                     console.log("이벤트 발생");
                 }
             });

• "mouseover focus", "mouseout blur"

  $(".btn2").on({
                 //마우스가 btn2에 올라갔을때와 포커스가 갔을 때...
                 "mouseover focus" : function() {
                     $("#p2").css({
                         "color" : "#0f0",
                         "font-weight" : "900"
                     });
                 },
                 //마우스가 btn2에서 커서가 나가거나 포커스를 강제로 잃어버렸을때..
                 "mouseout blur" : function() {
                     $("#p2").css({
                         "color" : "#000",
                         "font-weight" : "normal"
                     });
                 }
             });

• .off() 등록된 이벤트 제거

//off()는 등록된 이벤트를 제거할 때 사용한다.
            $(".btn1").off("click");
            $(".btn2").off("mouseout blur");1

2. $(document).ready(function(){ }); 는 $(function( ){})와 같다.

---

약간의 변형으로 같은 버튼을 눌렀을때 원래의 상태로 돌아가는 것을 구현해보고 싶은데 잘 안된다. unbind로 해야하는 것인지 잘 모르겠다.