javascript - español - attachevent

agregando múltiples escuchas de eventos a un elemento

Question

Así que mi dilema es que no quiero escribir el mismo código dos veces. Una vez para el evento clic y otro para el evento touchstart .

Aquí está el código original:

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

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

¿Cómo puedo compactar esto? ¡Tiene que haber una manera más simple!

Answer 1

A menos que su función do_something realmente haga algo con cualquier argumento dado, puede pasarlo como el controlador de eventos.

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 2

Este mini javascript libary (1.3 KB) puede hacer todas estas cosas

https://github.com/Norair1997/norjs/

nor.event(["#first"], ["touchstart", "click"], [doSomething, doSomething]);

Answer 3

Para una gran cantidad de eventos, esto podría ayudar:

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

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

function handler(event) {
    do_something();
}

Actualización 06/2017:

Ahora que las nuevas funciones de idioma están más disponibles, podría simplificar la adición de una lista limitada de eventos que comparten un oyente.

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

Si desea manejar muchos eventos y tiene diferentes requisitos por oyente, también puede pasar un objeto que la mayoría de la gente tiende a olvidar.

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

Answer 4

Puedes definir una función y pasarla. Las funciones anónimas no son especiales de ninguna manera, todas las funciones pueden pasarse como valores.

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

Answer 5

Sé que esta es una pregunta antigua, pero pensé que a algunos les podría resultar útil este enfoque; podría aplicarse a cualquier código similarmente repetitivo:

ES6

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

ES5

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

Answer 6

Tal vez puedas usar una función de ayuda como esta:

// 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 7

Tengo una pequeña solución que se adhiere al prototipo.

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

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

Le permite darle una cadena o matriz. La cadena se puede separar con un espacio (''''), una coma ('','') O un punto y coma ('';'')

Answer 8

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

Debería usar e.stopPropagation() porque, de lo contrario, su función se activará dos veces en el dispositivo móvil.