Привязка нескольких событий к прослушивателю (без JQuery)?

Question

Привязка нескольких событий к прослушивателю (без JQuery)?

во время работы с событиями браузера я начал включать touchEvents Safari для мобильных устройств. Я нахожу, что addEventListeners складываются с условными обозначениями. этот проект не может использовать JQuery.

стандартный прослушиватель событий:

/* option 1 */

window.addEventListener('mousemove', this.mouseMoveHandler, false);

window.addEventListener('touchmove', this.mouseMoveHandler, false);



/* option 2, only enables the required event */

var isTouchEnabled = window.Touch || false;

window.addEventListener(isTouchEnabled ? 'touchmove' : 'mousemove', this.mouseMoveHandler, false);

JQuery bind позволяет несколько событий, вот так:

$(window).bind('mousemove touchmove', function(e) {

    //do something;

});

есть ли способ объединить два прослушивателя событий, как в Примере JQuery? ex:

window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);

любой предложения или советы приветствуются!

603 8

jQuery javascript addeventlistener touch

8 ответов:

Comments

Ничего не найдено.

RobG · Accepted Answer · 2017-12-15 15:59:13

в 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-02-25

комментарий Дальгарда заставил меня вернуться к этому. Я думаю, что добавление одного и того же слушателя для нескольких событий на одном элементе теперь более распространено, чтобы охватить различные интерфейсы типы в использовании, и ответ Исаака предлагает хорошее использование встроенных методов для уменьшения кода (хотя меньший код сам по себе не обязательно является бонусом). Расширено с помощью функций стрелки ECMAScript 2015 дает:
function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}
аналогичная стратегия может добавить один и тот же прослушиватель к нескольким элементам, но необходимость этого может быть индикатором для делегирования событий.

Isaac · Accepted Answer · 2018-05-22 23:54:21

какой-то компактный синтаксис, который позволяет достичь желаемого результата, POJS:
   "mousemove touchmove".split(" ").forEach(function(e){
      window.addEventListener(e,mouseMoveHandler,false);
    });

pmrotule · Accepted Answer · 2018-06-21 13:21:36

очистка ответа Исаака:

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

ChrisTheButcher · Accepted Answer · 2016-04-04 14:30:16

ES2015:

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

user3796876 · Accepted Answer · 2015-07-10 16:52:32

для меня; этот код отлично работает и является самым коротким кодом для обработки нескольких событий с одинаковыми (встроенными) функциями.
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.");
    });
}

lillypad · Accepted Answer · 2017-07-16 02:12:14

У меня есть простое решение для вас:
window.onload = window.onresize = (event) => {
    //Your Code Here
}
Я проверил это, и он отлично работает, с положительной стороны он компактный и несложный, как и другие примеры здесь.

Selvakumar Arumugam · Accepted Answer · 2012-01-10 02:37:52

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

это обрабатывается в jQuery с помощью .split (" " ), а затем итерации по списку, чтобы установить eventListeners для каждого types.
    // 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

Reza Saadati · Accepted Answer · 2018-05-06 23:06:08

один из способов как это сделать:

const troll = document.getElementById('troll');

['mousedown', 'mouseup'].forEach(type => {
	if (type === 'mousedown') {
		troll.addEventListener(type, () => console.log('Mouse is down'));
	}
        else if (type === 'mouseup') {
                troll.addEventListener(type, () => console.log('Mouse is up'));
        }
});

img {
  width: 100px;
  cursor: pointer;
}

<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>