webentwicklung-frage-antwort-db.com.de

hinzufügen mehrerer Ereignis-Listener zu einem Element

Mein Dilemma ist also, dass ich nicht zweimal den gleichen Code schreiben möchte. Einmal für das Ereignis click und einmal für das Ereignis touchstart.

Hier ist der Originalcode:

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

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

Wie kann ich das komprimieren? Es muss einen einfacheren Weg geben!

34
coiso

Vielleicht können Sie eine Hilfsfunktion wie folgt verwenden:

// 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);
18
KooiInc

Ich weiß, dass dies eine alte Frage ist, aber ich dachte, einige könnten diesen Ansatz für nützlich halten. es könnte auf jeden ähnlich sich wiederholenden Code angewendet werden:

ES6

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

ES5

['click','ontouchstart'].forEach( function(evt) {
    element.addEventListener(evt, dosomething, false);
});
59
Allan Nienhuis

Sie können einfach eine Funktion definieren und übergeben. Anonyme Funktionen sind in keiner Weise besonders, alle Funktionen können als Werte übergeben werden.

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

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

function handler(event) {
    do_something();
}
8
Esailija

Bei einer großen Anzahl von Veranstaltungen kann dies hilfreich sein:

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);
}

Update 06/2017:

Da die neuen Sprachfunktionen jetzt umfangreicher verfügbar sind, können Sie das Hinzufügen einer begrenzten Liste von Ereignissen, die einen Listener gemeinsam nutzen, vereinfachen.

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));

Wenn Sie mit vielen Ereignissen umgehen möchten und unterschiedliche Anforderungen an jeden Zuhörer haben, können Sie auch ein Objekt übergeben das die meisten Leute vergessen.

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);
8
Torsten Walter

Wenn Ihre do_something-Funktion nicht tatsächlich mit bestimmten Argumenten etwas tut, können Sie sie einfach als Event-Handler übergeben.

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

Die einfachste Lösung für mich war, den Code an eine separate Funktion zu übergeben und diese Funktion dann in einem Ereignis-Listener aufzurufen. Das funktioniert wie ein Zauber.

function somefunction() { ..code goes here ..}

variable.addEventListener('keyup', function() {
   somefunction(); // calling function on keyup event
})

variable.addEventListener('keydown', function() {
   somefunction(); //calling function on keydown event
})
3
Armin

Ich habe eine kleine Lösung, die an den Prototyp angehängt wird

  EventTarget.prototype.addEventListeners = function(type, listener, options,extra) {
  let arr = type;
  if(typeof type == 'string'){
    let sp = type.split(/[\s,;]+/);
    arr = sp;   
  }
  for(let a of arr){
    this.addEventListener(a,listener,options,extra);
  }
};

Ermöglicht die Angabe einer Zeichenfolge oder eines Arrays. Die Zeichenfolge kann durch ein Leerzeichen (''), ein Komma (',') OR ein Semikolon (';') getrennt werden. 

2
Strauss Bornman

document.getElementById('first').addEventListener('touchstart',myFunction);

document.getElementById('first').addEventListener('click',myFunction);
    
function myFunction(e){
  e.preventDefault();e.stopPropagation()
  do_something();
}    

Sie sollten e.stopPropagation() verwenden, da sonst Ihre Funktion auf dem Mobiltelefon zweimal ausgelöst wird

1

Ich habe diese Funktion gerade gemacht (absichtlich reduziert):

((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element, events, handler)

Verwendungszweck:

((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element, ['click', 'touchstart'], (event) => {
    // function body
});

Der Unterschied zu anderen Ansätzen besteht darin, dass die Handhabungsfunktion nur einmal definiert und dann an jeden addEventListener übergeben wird.

BEARBEITEN:

Hinzufügen einer nicht reduzierten Version, um sie verständlicher zu machen. Die verkleinerte Version sollte nur kopiert und verwendet werden.

((element, event_names, handler) => {

    event_names.forEach( (event_name) => {
        element.addEventListener(event_name, handler)
    })

})(element, ['click', 'touchstart'], (event) => {

    // function body

});
0
Ian Pollak

Dies ist meine Lösung, bei der ich mehrere Ereignisse in meinem Workflow bearbeite.

let h2 = document.querySelector("h2");

function addMultipleEvents(eventsArray, targetElem, handler) {
        eventsArray.map(function(event) {
            targetElem.addEventListener(event, handler, false);
        }
    );
}
let counter = 0;
function countP() {
    counter++;
    h2.innerHTML = counter;
}

// magic starts over here...
addMultipleEvents(['click', 'mouseleave', 'mouseenter'], h2, countP);
<h1>MULTI EVENTS DEMO - If you click, move away or enter the mouse on the number, it counts...</h1>

<h2 style="text-align:center; font: bold 3em comic; cursor: pointer">0</h2>
0
Luis Febro

Semi-bezogen, dient jedoch zur Initialisierung eines eindeutigen spezifischen Ereignislisteners pro Element.

Sie können den Schieberegler verwenden, um die Werte in Echtzeit anzuzeigen, oder die Konsole überprüfen. __ Im Element <input> habe ich ein attr-Tag mit dem Namen data-whatever, sodass Sie diese Daten anpassen können, wenn Sie möchten.

sliders = document.querySelectorAll("input");
sliders.forEach(item=> {
  item.addEventListener('input', (e) => {
    console.log(`${item.getAttribute("data-whatever")} is this value: ${e.target.value}`);
    item.nextElementSibling.textContent = e.target.value;
  });
})
.wrapper {
  display: flex;
}
span {
  padding-right: 30px;
  margin-left: 5px;
}
* {
  font-size: 12px
}
<div class="wrapper">
  <input type="range" min="1" data-whatever="size" max="800" value="50" id="sliderSize">
  <em>50</em>
  <span>Size</span>
  <br>
  <input type="range" min="1" data-whatever="OriginY" max="800" value="50" id="sliderOriginY">
  <em>50</em>
  <span>OriginY</span>
  <br>
  <input type="range" min="1" data-whatever="OriginX" max="800" value="50" id="sliderOriginX">
  <em>50</em>
  <span>OriginX</span>
</div>

0
Vincent Tang