[JQUERY] jQuery를 여러 이벤트는 동일한 기능을 트리거 할

jQuery를 여러 이벤트는 동일한 기능을 트리거 할

해결법

1. ---

   1.여러 이벤트에 함수를 바인딩 CSTE 연구진 ()를 사용할 수 있습니다 :

   여러 이벤트에 함수를 바인딩 CSTE 연구진 ()를 사용할 수 있습니다 :

   $('#element').on('keyup keypress blur change', function(e) {
       // e.type is the type of event fired
   });
   

   아니면 그냥 일반 이벤트 함수에 매개 변수로 함수를 전달합니다

   var myFunction = function() {
      ...
   }
   
   $('#element')
       .keyup(myFunction)
       .keypress(myFunction)
       .blur(myFunction)
       .change(myFunction)
   

2. ---

   2.jQuery를 1.7으로, CSTE 연구진 () 메소드는 문서 이벤트 핸들러를 부착하기위한 바람직한 방법이다. 이전 버전의 .bind () 메소드는 요소에 직접 이벤트 핸들러를 부착에 사용된다.

   jQuery를 1.7으로, CSTE 연구진 () 메소드는 문서 이벤트 핸들러를 부착하기위한 바람직한 방법이다. 이전 버전의 .bind () 메소드는 요소에 직접 이벤트 핸들러를 부착에 사용된다.

   $(document).on('mouseover mouseout',".brand", function () {
     $(".star").toggleClass("hovered");
   })
   

3. ---

   3.jQuery를 한 번에 여러 이벤트를 수신 할 때 나는 이벤트 유형을 얻을 수있는 방법을 찾고 있었다, 구글은 여기에 나를 넣어.

   jQuery를 한 번에 여러 이벤트를 수신 할 때 나는 이벤트 유형을 얻을 수있는 방법을 찾고 있었다, 구글은 여기에 나를 넣어.

   그래서 관심이있는 사람들을 위해, event.type 내 대답은 :

   $('#element').on('keyup keypress blur change', function(event) {
       alert(event.type); // keyup OR keypress OR blur OR change
   });
   

   JQuery와 문서에서 더 많은 정보를 원하시면.

4. ---

   4.당신은 여러 이벤트에 기능을 연결하는 바인딩 방법을 사용할 수 있습니다. 그냥 이벤트 이름이 코드에서와 같이 핸들러 함수를 전달합니다

   당신은 여러 이벤트에 기능을 연결하는 바인딩 방법을 사용할 수 있습니다. 그냥 이벤트 이름이 코드에서와 같이 핸들러 함수를 전달합니다

   $('#foo').bind('mouseenter mouseleave', function() {
     $(this).toggleClass('entered');
   });
   

   또 다른 옵션은 JQuery와 API의 체인 지원을 사용하는 것입니다.

5. ---

   5.여러 이벤트에 동일한 이벤트 핸들러를 연결하는 경우, 당신은 자주 (;를 keyDown, 변경, 흐림 모든 불을 수도 편집 한 후 예를 들어, 사용자 프레스 탭) 한 번에 발사 그들 중 하나 이상의 문제로 실행합니다.

   여러 이벤트에 동일한 이벤트 핸들러를 연결하는 경우, 당신은 자주 (;를 keyDown, 변경, 흐림 모든 불을 수도 편집 한 후 예를 들어, 사용자 프레스 탭) 한 번에 발사 그들 중 하나 이상의 문제로 실행합니다.

   당신이 실제로 원하는 것은이 같은 것입니다 것 같은데 :

   $('#ValidatedInput').keydown(function(evt) {
     // If enter is pressed
     if (evt.keyCode === 13) {
       evt.preventDefault();
   
       // If changes have been made to the input's value, 
       //  blur() will result in a change event being fired.
       this.blur();
     }
   });
   
   $('#ValidatedInput').change(function(evt) {
     var valueToValidate = this.value;
   
     // Your validation callback/logic here.
   });
   

6. ---

   6.이것은 내가 그것을 할 방법이다.

   이것은 내가 그것을 할 방법이다.

   $("input[name='title']").on({
       "change keyup": function(e) {
           var slug = $(this).val().split(" ").join("-").toLowerCase();
           $("input[name='slug']").val(slug);
       },
   });
   

7. ---

   7.당신은 당신이 아래로 재사용하고자하는 기능을 정의 할 수 있습니다 :

   당신은 당신이 아래로 재사용하고자하는 기능을 정의 할 수 있습니다 :

   var foo = function() {...}
   

   그리고 나중에는 아래와 같이 기능 사이의 공간을 떠나 ( '이벤트')를 사용하여 해당 트리거 개체에 당신이 원하는 그러나 많은 이벤트 리스너를 설정할 수 있습니다 :

   $('#selector').on('keyup keypress blur change paste cut', foo);
   

8. ---

   8.타투에 의한 대답은 내가 직관적으로 그것을 할 것입니다 방법입니다,하지만 난 / 중첩 그것이 CSTE 연구진 () 메소드를 통해 이루어진다하더라도, 이벤트를 바인딩이 방법을 Internet Explorer에서 몇 가지 문제를 경험했습니다.

   타투에 의한 대답은 내가 직관적으로 그것을 할 것입니다 방법입니다,하지만 난 / 중첩 그것이 CSTE 연구진 () 메소드를 통해 이루어진다하더라도, 이벤트를 바인딩이 방법을 Internet Explorer에서 몇 가지 문제를 경험했습니다.

   나는 정확히 jQuery를 버전이 문제가 함께있는 정확하게 할 수 있었다 havn't는. 하지만 때때로 다음 버전에서 문제를 볼 :

   내 해결은 먼저 함수를 정의하고있다

   function myFunction() {
       ...
   }
   

   다음 개별적으로 이벤트를 처리

   // Call individually due to IE not handling binds properly
   $(window).on("scroll", myFunction);
   $(window).on("resize", myFunction);
   

   이 예쁜 해결책은 아니지만, 나를 위해 작동하고, 나는이 문제를 우연히 발견 할 수 도움말 다른 사람이 그것을 넣어 줄 알았는데

9. ---

   9.

   $("element").on("event1 event2 event..n", function() {
      //execution
   });
   

   이 튜토리얼은 여러 이벤트 처리에 관한 것입니다.

10. ---

    10.이 방법으로 여러 이벤트를 전달할 수 있도록, CSTE 연구진 (이벤트 [선택기], 데이터, 핸들러)에는 다음과 같은 구조를 허용 CSTE 연구진 ()를 사용 가능하다. 귀하의 경우는 다음과 같아야합니다 :

    이 방법으로 여러 이벤트를 전달할 수 있도록, CSTE 연구진 (이벤트 [선택기], 데이터, 핸들러)에는 다음과 같은 구조를 허용 CSTE 연구진 ()를 사용 가능하다. 귀하의 경우는 다음과 같아야합니다 :

    $('#target').on('keyup keypress blur change', function(e) {
        // "e" is an event, you can detect the type of event using "e.type"
    });
    

    그리고 여기에 라이브 예입니다 :

    $ ( '# 타겟'). ( '의 keyup 누르기 흐림 변경', 함수 (E)에 { 을 console.log ( ' "$ {e.type.toUpperCase ()}"이벤트 happened`) }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <입력 ID = "타겟">

11. ---

    11.: 이벤트 이름의 배열을 반복, 그리고 각각에 대해 리스너를 추가 - 그것의 간단한은 당신이 원하는 경우 내장 된 jQuery를 같은 큰 라이브러리없이 DOM 방법, 그냥 소요 조금 더 코드로이를 구현하기

    : 이벤트 이름의 배열을 반복, 그리고 각각에 대해 리스너를 추가 - 그것의 간단한은 당신이 원하는 경우 내장 된 jQuery를 같은 큰 라이브러리없이 DOM 방법, 그냥 소요 조금 더 코드로이를 구현하기

    function validate() {
      // ...
    }
    
    const element = document.querySelector('#element');
    ['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
      element.addEventListener(eventName, validate);
    });
    

from https://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function by cc-by-sa and MIT license