[JQUERY] 리스너에 (JQuery와없이) 여러 이벤트 바인딩?

리스너에 (JQuery와없이) 여러 이벤트 바인딩?

해결법

1. ---

   1.POJS, 당신은 한 번에 하나의 리스너를 추가합니다. 이 같은 요소에 두 개의 다른 이벤트에 대해 동일한 리스너를 추가하는 것이 일반적 없습니다. 당신은, 예컨대을 일을 자신의 작은 기능을 쓸 수 있습니다 :

   POJS, 당신은 한 번에 하나의 리스너를 추가합니다. 이 같은 요소에 두 개의 다른 이벤트에 대해 동일한 리스너를 추가하는 것이 일반적 없습니다. 당신은, 예컨대을 일을 자신의 작은 기능을 쓸 수 있습니다 :

   /* Add one or more listeners to an element
   ** @param {DOMElement} element - DOM element to add listeners to
   ** @param {string} eventNames - space separated list of event names, e.g. 'click change'
   ** @param {Function} listener - function to attach for each event as a listener
   */
   function addListenerMulti(element, eventNames, listener) {
     var events = eventNames.split(' ');
     for (var i=0, iLen=events.length; i<iLen; i++) {
       element.addEventListener(events[i], listener, false);
     }
   }
   
   addListenerMulti(window, 'mousemove touchmove', function(){…});
   

   희망이 개념을 보여줍니다.

   편집 2016년 2월 25일

   Dalgard의 코멘트 날이 방문하는 원인이되었다. 나는 하나 개의 요소에 여러 이벤트에 대해 동일한 리스너를 추가 추측하는 것은 좋은 사용 사용의 다양한 인터페이스 유형을 커버하기 더욱 일반적이고, 이삭의 대답 제공 내장 된 적은 코드는 비록 그 자체, (코드를 줄일 수있는 방법 , 반드시 보너스). 기능을 제공합니다 화살표 ECMAScript를 2015으로 확장 :

   function addListenerMulti(el, s, fn) {
     s.split(' ').forEach(e => el.addEventListener(e, fn, false));
   }
   

   유사한 전략은 여러 요소에 동일한 리스너를 추가 할 수 있지만, 그렇게 할 필요는 이벤트 위임에 대한 지표가 될 수 있습니다.

2. ---

   2.원하는 결과, POJS을 달성 일부 소형 구문 :

   원하는 결과, POJS을 달성 일부 소형 구문 :

      "mousemove touchmove".split(" ").forEach(function(e){
         window.addEventListener(e,mouseMoveHandler,false);
       });
   

3. ---

   3.이삭의 대답까지 청소 :

   이삭의 대답까지 청소 :

   ['mousemove', 'touchmove'].forEach(function(e) {
     window.addEventListener(e, mouseMoveHandler);
   });
   

   편집하다

   ES6 도우미 기능 :

   function addMultipleEventListener(element, events, handler) {
     events.forEach(e => element.addEventListener(e, handler))
   }
   

4. ---

   4.나를 위해; 이 코드는 잘 작동하고 같은 (인라인) 함수를 여러 이벤트를 처리 할 수있는 짧은 코드입니다.

   나를 위해; 이 코드는 잘 작동하고 같은 (인라인) 함수를 여러 이벤트를 처리 할 수있는 짧은 코드입니다.

   var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."];
   for(event of eventList) {
       element.addEventListener(event, function() {
           // your function body...
           console.log("you inserted things by paste or typing etc.");
       });
   }
   

5. ---

   5.ES2015 :

   ES2015 :

   let el = document.getElementById("el");
   let handler =()=> console.log("changed");
   ['change', 'keyup', 'cut'].forEach(event => el.addEventListener(event, handler));
   

6. ---

   6.나는 당신을 위해 간단한 해결책이있다 :

   나는 당신을 위해 간단한 해결책이있다 :

   window.onload = window.onresize = (event) => {
       //Your Code Here
   }
   

   나는이있는 IT가에, 좋은 작품 플러스는 여기에 다른 예처럼 작고 복잡하지 않은 편 테스트했습니다.

7. ---

   7.하여 addEventListener는 event.type을 나타내는 간단한 문자열을. 여러 이벤트를 반복하는 사용자 정의 함수를 작성해야합니다 그래서.

   하여 addEventListener는 event.type을 나타내는 간단한 문자열을. 여러 이벤트를 반복하는 사용자 정의 함수를 작성해야합니다 그래서.

   이는 각각의 유형의 이벤트 리스너를 설정 목록을 통해 .split ( "")를 사용하고 반복하여 jQuery를 취급하고있다.

       // Add elem as a property of the handle function
       // This is to prevent a memory leak with non-native events in IE.
       eventHandle.elem = elem;
   
       // Handle multiple events separated by a space
       // jQuery(...).bind("mouseover mouseout", fn);
       types = types.split(" ");  
   
       var type, i = 0, namespaces;
   
       while ( (type = types[ i++ ]) ) {  <-- iterates thru 1 by 1
   

8. ---

   8.그것을 수행하는 방법 한 가지 방법 :

   그것을 수행하는 방법 한 가지 방법 :

   CONST 트롤 = document.getElementById를 ( '트롤'); [ 'mousedown' '와 mouseUp']. 대해 forEach (TYPE => { 경우 (유형 === 'mousedown') { troll.addEventListener (유형, () => CONSOLE.LOG () "마우스 다운 '); } 다른 경우 (유형 === '와 mouseUp') { troll.addEventListener (유형, () => CONSOLE.LOG () 마우스 최대 인 '); } }); IMG { 폭 : 100 픽셀; 커서 : 포인터; }

from https://stackoverflow.com/questions/8796988/binding-multiple-events-to-a-listener-without-jquery by cc-by-sa and MIT license