добавление нескольких прослушивателей событий в один элемент

Итак, моя дилемма заключается в том, что я не хочу писать два раза один и тот же код. Один раз для события click, а другой для touchstart событие.

вот исходный код:

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

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

Как я могу это компактный? Должен быть более простой способ!

29
dom-events html javascript

8 ответов

возможно, вы можете использовать вспомогательную функцию следующим образом:

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

Я знаю, это старый вопрос, но я думал, что некоторые могут найти этот подход полезным; он может быть применен к любой аналогично повторяющегося кода:

ЕС6

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

в ES5

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

вы можете просто определить функцию и передать ее. Анонимные функции никоим образом не являются особенными, все функции могут передаваться как значения.

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

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

function handler(event) {
    do_something();
}
7

Если do_something функция фактически делает что-то с любыми заданными аргументами, вы можете просто передать ее как обработчик событий.

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

для большого количества событий это может помочь:

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 обновления:

Теперь, когда новые языковые функции более доступны, вы можете упростить добавление ограниченного списка событий, которые разделяют один слушатель.

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

Если вы хотите обрабатывать множество событий и иметь разные требования к каждому слушателю, вы также можете передать объект большинство людей склонны забывать.

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

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

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

вы должны использовать e.stopPropagation() потому что, если нет, ваша функция будет уволен дважды на мобильном

1

У меня есть небольшое решение, которое придает прототип

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

позволяет дать ему строку или массив. Строка может быть разделена пробелом(' '), запятой(',') или точкой с запятой(';')

1

этот мини-javascript libary (1.3 KB) может делать все эти вещи

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

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