하나의 선택기에 여러 이벤트 핸들러를 사용하는 JQuery.on() 메서드

하나의 선택기에 여러 이벤트 핸들러를 사용하는 JQuery.on() 메서드

여러 이벤트가 연결된 특정 선택기에서 Jquery .on() 메서드를 사용하는 방법을 파악하는 중입니다.이전에 .live() 메서드를 사용하고 있었는데 .on()으로 동일한 작업을 수행하는 방법을 잘 모르겠습니다.제 코드는 아래와 같습니다.

$("table.planning_grid td").live({
  mouseenter:function(){
     $(this).parent("tr").find("a.delete").show();
  },
  mouseleave:function(){
     $(this).parent("tr").find("a.delete").hide();        
  },
  click:function(){
    //do something else.
  }
});
       

다음 전화를 통해 여러 이벤트를 할당할 수 있다는 것을 알고 있습니다.

 $("table.planning_grid td").on({
    mouseenter:function(){  //see above
    },
    mouseleave:function(){ //see above
    }
    click:function(){ //etc
    }
  });

하지만 .on()의 적절한 사용은 다음과 같습니다.

   $("table.planning_grid").on('mouseenter','td',function(){});

이것을 달성할 수 있는 방법이 있습니까?아니면 여기서 가장 좋은 연습 방법은 무엇입니까?아래 코드를 시도해 보았지만 주사위는 없었습니다.

$("table.planning_grid").on('td',{
   mouseenter: function(){ /* event1 */ }, 
   mouseleave: function(){ /* event2 */ },
   click: function(){  /* event3 */ }
 });

그 반대입니다.다음과 같이 적어야 합니다.

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");

또한 동일한 선택기에 동일한 기능을 실행하는 여러 이벤트 핸들러가 연결되어 있는 경우 다음과 같이 사용할 수 있습니다.

$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});

다른 이벤트에서 동일한 기능을 사용하려면 다음 코드 블록을 사용할 수 있습니다.

$('input').on('keyup blur focus', function () {
   //function block
})

저는 여기서 정말 유용하고 기본적인 것을 배웠습니다.

이 경우에는 함수 출력을 포함한 대부분의 jQuery Function에서 작동하는 chaining function이 매우 유용합니다.

대부분의 jQuery 함수의 출력이 입력 객체 세트이기 때문에 바로 사용할 수 있고 더 짧고 똑똑하게 만들 수 있습니다.

function showPhotos() {
    $(this).find("span").slideToggle();
}

$(".photos")
    .on("mouseenter", "li", showPhotos)
    .on("mouseleave", "li", showPhotos);

그리고 다음과 같은 방법으로 동일한 이벤트/기능을 결합할 수 있습니다.

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    'click blur paste' : function() {
        // Handle click...
    }
}, "input");

다음 코드로 시도합니다.

$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change', 
  function() {

  }
);

언급URL : https://stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector