본문 바로가기

js

[js]제이쿼리 이벤트 연속 등록 여러개

동일한 객체, 동일한 함수 / 다른 이벤트 실행

  $("div").on("click mouseenter mouseleave",function(){
    $("p").toggleClass("on")
  })

/* 위와 같은 값 */

  $("div").click(function(){
    $("p").toggleClass("on")
  })
  $("div").mouseenter(function(){
    $("p").toggleClass("on")
  })
  $("div").mouseleave(function(){
    $("p").toggleClass("on")
  })

hover는 안됨

 

동일한 객체 / 다른 이벤트, 다른 함수 실행

 $("div").click(function(){
    $("p").text("클릭")
  })
  $("div").mouseenter(function(){
    $("p").text("마우스엔터")
  })
  $("div").mouseleave(function(){
    $("p").text("마우스리브")
  })

/* 같은 값 */

  $("div").on({
    click:function(){
      $("p").text("클릭")
    },
    mouseenter:function(){
      $("p").text("마우스엔터")
    },
    mouseleave:function(){
      $("p").text("마우스리브")
    }
  })

↓hover의 경우 사용 가능

 $("div").hover(function(){
    $("p").text("인")
  },function(){
    $("p").text("아웃")
  })

top