여러 캐시 된 선택기에 jQuery 이벤트 핸들러를 적용하는 방법은 무엇입니까?

Question

내가 변수의 버튼을

var $normalButton = $('#normalButton'); 
var $growButton = $('.resizeButton[data-action="grow"]'); 
var $shrinkButton = $('.resizeButton[data-action="shrink"]'); 

지금은 일반 버튼

에 mouseenter, mouseleave 및 click 이벤트 핸들러를 연결하고 싶은 말은 할 수 있습니다 세 개의 버튼

<button data-action="grow" class="resizeButton">Grow</button> 
<button data-action="shrink" class="resizeButton">Shrink</button> 
<button id="normalButton">Normal Button</button> 

가 있다고 가정하자

$normalButton.on({ 
    mouseenter: function(){ 
     //do some stuff 
    }, 

    mouseleave: function(){ 
     //reverse some stuff 
    }, 

    click: function(){ 
     //do some more stuff 
    } 
}); 

마법의 jQuery 마법사가이 기능을 제공합니다.

이제 grow 버튼과 shrink 버튼에 mouseenter, mouseleave 및 click 이벤트 핸들러를 추가한다고 가정 해 보겠습니다. 해당 버튼에 대한 핸들러는 같지만 일반 버튼에 대한 핸들러는 다릅니다.

내가 볼 수있는 두 가지 방법이 있지만, 기본적으로 모두 동일한 아이디어입니다. 첫 번째 버튼에 한 번, 두 번째 버튼으로 한 번 두 번 할당하십시오.

그래서,

var handlers = { 
    mouseenter: function(){ 
     //do some different stuff 
    }, 

    mouseleave: function(){ 
     //reverse some different stuff 
    }, 

    click: function(){ 
     //do some more different stuff 
    } 
}; 

$growButton.on(handlers); 
$shrinkButton.on(handlers); 

또는

$.each([$growButton, $shrinkButton], function(i, el){ 
    el.on({ 
     mouseenter: function(){ 
      //do some different stuff 
     }, 

     mouseleave: function(){ 
      //reverse some different stuff 
     }, 

     click: function(){ 
      //do some more different stuff 
     } 
    }); 
}); 

그러나 캐시 선택기의 그룹에 핸들러를 적용 단지에서의 jQuery 객체를 만들거나하는 구문이 있다면 제가 궁금 것은 $([$growButton, $shrinkButton]).on(... 또는 이와 (과) 유사합니까?

Answer 1

당신은 add 방법을 사용할 수 있습니다

$growButton.add($shrinkButton).on(...)