複数のイベントリスナーを1つの要素に追加する

Question

私のジレンマは、同じコードを2回書く必要がないということです。 clickイベントの場合は1回、touchstartイベントの場合はもう1回ここで

元のコードです：

document.getElementById('first').addEventListener('touchstart', function(event) { 
    do_something(); 
    }); 

document.getElementById('first').addEventListener('click', function(event) { 
    do_something(); 
    }); 

は、どのように私はこれを圧縮することができますか？よりシンプルな方法が必要です！

Answer 1

たぶん、あなたはこのようにヘルパー関数を使用することができます。

// events and args should be of type Array 
function addMultipleListeners(element,events,handler,useCapture,args){ 
    if (!(events instanceof Array)){ 
    throw 'addMultipleListeners: '+ 
      'please supply an array of eventstrings '+ 
      '(like ["click","mouseover"])'; 
    } 
    //create a wrapper to be able to use additional arguments 
    var handlerFn = function(e){ 
    handler.apply(this, args && args instanceof Array ? args : []); 
    } 
    for (var i=0;i<events.length;i+=1){ 
    element.addEventListener(events[i],handlerFn,useCapture); 
    } 
} 

function handler(e) { 
    // do things 
}; 

// usage 
addMultipleListeners(
    document.getElementById('first'), 
    ['touchstart','click'], 
    handler, 
    false); 

Answer 2

関数を定義して渡すことができます。匿名関数は特別なものではなく、すべての関数を値として渡すことができます。

var elem = document.getElementById('first'); 

elem.addEventListener('touchstart', handler, false); 
elem.addEventListener('click', handler, false); 

function handler(event) { 
    do_something(); 
} 

Answer 3

あなたdo_something機能は、実際に任意の引数を指定して何かをしない限り、あなただけのイベントハンドラとしてそれを渡すことができます。これは、多数のイベントのために

var first = document.getElementById('first'); 
first.addEventListener('touchstart', do_something, false); 
first.addEventListener('click', do_something, false); 

Answer 4

を助けるかもしれない：

var element = document.getElementById("myId"); 
var myEvents = "click touchstart touchend".split(" "); 
var handler = function (e) { 
    do something 
}; 

for (var i=0, len = myEvents.length; i < len; i++) { 
    element.addEventListener(myEvents[i], handler, false); 
} 

更新06/2017：今すぐ

その新しい言語機能を使用すると、制限されたリストを追加簡素化することができ、より広く利用されています1つのリスナーを共有するイベントの

const element = document.querySelector("#myId"); 

function handleEvent(e) { 
    // do something 
} 
// I prefer string.split because it makes editing the event list slightly easier 

"click touchstart touchend touchmove".split(" ") 
    .map(name => element.addEventListener(name, handleEvent, false)); 

あなたがイベントの多くを処理し、ほとんどの人が忘れがちどのpass an objectもすることができます、リスナーごとに異なる要件を持っているしたい場合。

const el = document.querySelector("#myId"); 

const eventHandler = { 
    // called for each event on this element 
    handleEvent(evt) { 
     switch (evt.type) { 
      case "click": 
      case "touchstart": 
       // click and touchstart share click handler 
       this.handleClick(e); 
       break; 
      case "touchend": 
       this.handleTouchend(e); 
       break; 
      default: 
       this.handleDefault(e); 
     } 
    }, 
    handleClick(e) { 
     // do something 
    }, 
    handleTouchend(e) { 
     // do something different 
    }, 
    handleDefault(e) { 
     console.log("unhandled event: %s", e.type); 
    } 
} 

el.addEventListener(eventHandler); 

Answer 5

私はこれが古い質問ですけど、私はいくつかの便利なこのアプローチを見つけるかもしれないと思いました。 ..私はちょうど迅速な方法があるかもしれないと思った

ES6

['click','ontouchstart'].forEach(evt => 
    element.addEventHandler(evt, dosomething, false) 
); 

ES5

['click','ontouchstart'].forEach(function(evt) { 
    element.addEventHandler(evt, dosomething, false); 
});