Enquanto trabalhava com eventos do navegador, comecei a incorporar o touchEvents do Safari para dispositivos móveis. Acho que addEventListener
estão se acumulando com condicionais. Este projeto não pode usar o JQuery.
Um ouvinte de evento padrão:
/* 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);
O JQuery's bind
permite vários eventos, como:
$(window).bind('mousemove touchmove', function(e) {
//do something;
});
Existe uma maneira de combinar os dois ouvintes de eventos como no exemplo JQuery? ex:
window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);
Todas as sugestões ou dicas são bem-vindas!
javascript
jquery
touch
addeventlistener
johnkreitlow
fonte
fonte
Respostas:
No POJS, você adiciona um ouvinte por vez. Não é comum adicionar o mesmo ouvinte para dois eventos diferentes no mesmo elemento. Você pode escrever sua própria função pequena para fazer o trabalho, por exemplo:
Espero que isso mostre o conceito.
Editar 2016-02-25
O comentário de Dalgard me fez revisitar isso. Eu acho que adicionar o mesmo ouvinte para vários eventos em um elemento é mais comum agora para cobrir os vários tipos de interface em uso, e a resposta de Isaac oferece um bom uso de métodos internos para reduzir o código (embora menos código seja, por si só) , não necessariamente um bônus). Ampliado com as funções de seta do ECMAScript 2015, fornece:
Uma estratégia semelhante pode adicionar o mesmo ouvinte a vários elementos, mas a necessidade de fazer isso pode ser um indicador para a delegação de eventos.
fonte
"It is not common to add the same listener for two different events on the same element."
Às vezes (verdes) devs precisa ouvir isso de saber que eles estão fazendo certo :)Alguma sintaxe compacta que alcança o resultado desejado, POJS:
fonte
['mousemove', 'touchmove'].forEach(...)
['mousemove', 'touchmove'].forEach(function(event) { window.addEventListener(event, handler);});
seria não apenas muito mais legível, mas também muito mais rápido, sem precisar dividir a sequência e executar uma função para cada item na matriz resultante.Limpando a resposta de Isaac:
EDITAR
Função auxiliar ES6:
fonte
Para mim; esse código funciona bem e é o código mais curto para lidar com vários eventos com as mesmas funções (em linha).
fonte
ES2015:
fonte
for...of
loopEu tenho uma solução mais simples para você:
Eu testei isso e funciona muito bem, no lado positivo é compacto e descomplicado, como nos outros exemplos aqui.
fonte
AddEventListener usa uma sequência simples que representa event.type . Portanto, você precisa escrever uma função personalizada para iterar em vários eventos.
Isso está sendo tratado no jQuery usando .split ("") e, em seguida, iterando sobre a lista para definir os eventListeners para cada um
types
.fonte
Uma maneira de fazer isso:
fonte