4

Eu sou novo em programação e eu estava criando um código html, em que eu estou chamando funções JS no meu próprio input.

Enfim, eu tenho esse trecho, no meu código do input:

<input type="text" onclick="setTimeout(funcaojs, 1)" onkeydown="setTimeout(funcaojs, 1)">

Repare que eu repito uma parte do código duas vezes. Como estou em busca de aprendizado e aprimoração do meu código, resolvi recorrer a vcs.

Tem alguma maneira de eu juntar os dois eventos para nao repetir o código? algo como:

<input type="text" (onclick, onkeydown)="setTimeout(funcaojs, 1)">

Sei que este exemplo meu é besta e nao funcionaria desta maneira, mas só gostaria de saber se há alguma maneira de fazer isso, e se sim, como.

Agradeço a todos que puderem contribuir.

3
  • Creio eu, que isso não seja possível se quiser chamar a mesma função, mas agrupando dois evento, tera que criar um evento do mesmo jeito para o elemento e colocar a função que deseja chamar. Commented 10/07/2019 às 17:43
  • @LeandroNascimento, pode dar um exemplo?
    – edro
    Commented 10/07/2019 às 17:44
  • O primeiro código que você escreveu em cima é o que estou me se referindo. Não é possível isso que você deseja! Commented 10/07/2019 às 17:54

5 Respostas 5

5

Não é possível fazer o que você deseja. A sintaxe de exemplo que você demonstrou na pergunta é inválida.

O que você pode fazer é criar uma função que encapsulará todo o bloco de código que você precisa executar. Após isso basta reutilizar a função em diversos lugares.

Algo assim:

function eventHandler(message) {
  console.log('Hello! From ' + message)
}
<input onclick="eventHandler('Focou')" onblur="eventHandler('Desfocou')" />

Tente focar e desfocar o input. Você agora está utilizando a mesma função para dois eventos distintos.


PS: A medida que o seu código cresce, passa ser ruim definir os eventos diretamente no HTML. APIs como o addEventListener são recomendadas, já que com elas você pode definir o evento diretamente no código JavaScript.

E é importante salientar que o addEventListener não aceita múltiplos eventos ao mesmo tempo. Você precisa criar o listener individualmente para cada evento.

const el = document.querySelector('button');

function handler(type) {
  console.log('Evento! ->', type);
}

el.addEventListener('mouseenter', () => handler('Entrou'));
el.addEventListener('mouseleave', () => handler('Saiu'));
<button>Passe o Mouse!</button>

2
  • E com o addEventListener eu consigo algo como id.addEventListener('click change mouseup', funcaojs())?
    – edro
    Commented 10/07/2019 às 17:54
  • Não. Editei a pergunta adicionando mais detalhes. Commented 10/07/2019 às 18:00
4

O que vc pode fazer e levar a função para fora da tag e fazer um script associando o elemento que vai ter a interação, assim vc pode atribuir vários eventListners ao mesmo elemento.

inserir a descrição da imagem aqui

Abaixo eu adiciona vários listeners ao mesmo btn, não é um exemplo usual, mas da para vc entender como ter várias interações com o elemento utilizando a mesma função.

var btn = document.getElementById('btn');
function minhaFunk(){
    document.body.classList.toggle('ativo');
}
btn.addEventListener('mouseover', minhaFunk);
btn.addEventListener('mouseleave', minhaFunk);
btn.addEventListener('click', minhaFunk);
.ativo {background:red}
<button id="btn">clicar</button>

2
  • Não é possível btn.addEventListener('mouseover mouseleave click', minhaFunk);, como é possível $(id).on('mouseover mouseleave click', minhaFunk()) no jQuery não?
    – edro
    Commented 10/07/2019 às 18:06
  • @edro jQuery é útil justamente nessas horas quando vc quer economizar algumas linhas de código, mas por debaixo dos panos é bem provável que ele esteja criando um listener para cada tipo de interação. O ES6 já absorveu muito do jQuery, mas isso até onde sei não é possível fazer de forma simples, mas aqui tem algumas anternativas pra vc estudar stackoverflow.com/questions/11845678/…
    – hugocsl
    Commented 10/07/2019 às 18:09
4

Pode fazer assim:

HTML:

<input type="text" onclick="funcao()" onkeydown="this.click()">

JS:

const funcao = _ => alert(1);

Mas eu faria assim:

const funcao = _ => alert(1),
input = document.querySelector('input[name="meuinput"]');

['click', 'keydown'].forEach(i => input.addEventListener(i, funcao));
<input name="meuinput" type="text" /">

1
  • Obrigado pela resposta, mas acho que isso não ajuda muito, estou buscando uma maneira de diminuir minha tag, trazendo menos código.
    – edro
    Commented 10/07/2019 às 17:48
3

Eu sei que a pergunta não tem a tag Jquery, mas eu vou responder na mesma pois acho que é informação util. Através de Jquery você consegue registar múltiplos eventos para o mesmo código com a função on. Esta função recebe como primeiro parâmetro uma string com os eventos a serem capturados, separados por espaço.

Veja um exemplo capturando o evento click e keydown na caixa de texto:

$("#texto").on("click keydown", function(){
  console.log("evento lançado");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="texto">

1
  • Apesar de não ser Vanilla achei legal, não sabia dessa ;)
    – hugocsl
    Commented 10/07/2019 às 23:20
2

Com a sintaxe do HTML não é possível, pois é estática. Você até consegue criar um pré-processador que faça o que deseja, o que facilitaria a manutenção, mas no código final acabaria sendo a mesma coisa.

Com JavaScript, usando atributos data

Sem quebrar a sintaxe do HTML, com auxílio do JavaScript você conseguiria fazer algo como:

<input type="text" data-events="(click, keydown)=funcaojs" />

O código para analisar isso poderia ser bastante simples ou bem mais elaborado, dependendo das suas necessidades. Nesse caso, poderia ser algo como:

const elements = document.querySelectorAll('[data-events]')
const pattern = /^\((.*)\)=(.*)$/

for (let element of elements) {
  let config = element.dataset.events
  let groups = config.match(pattern)
  
  if (groups) {
    let events = groups[1].split(',').map(event => event.trim())
    let handler = groups[2]
    
    for (let event of events) {
      console.log(`Adicionando a função ${handler} ao evento ${event}`)
      element.addEventListener(event, window[handler])
    }
  }
}

// Função que tratará os eventos
function funcaojs(event) {
  console.log(`Evento ${event.type} disparado em um ${event.target.tagName}`)
}
<input type="text" data-events="(click, keydown)=funcaojs" />

É um exemplo bastante simples e talvez não seja completamente funcional para colocar em produção, até porque meu intuito foi apenas fazer a prova de conceito da solução. Você pode (e deve) adaptá-la conforme suas necessidades.

Mas é importante ressaltar que embora seja um código simples ele se adapta à quantidade de elementos que você possui na página. Isto é, você pode utilizar o mesmo atributo data-events em qualquer elemento que desejar:

const elements = document.querySelectorAll('[data-events]')
const pattern = /^\((.*)\)=(.*)$/

for (let element of elements) {
  let config = element.dataset.events
  let groups = config.match(pattern)
  
  if (groups) {
    let events = groups[1].split(',').map(event => event.trim())
    let handler = groups[2]
    
    for (let event of events) {
      console.log(`Adicionando a função ${handler} ao evento ${event}`)
      element.addEventListener(event, window[handler])
    }
  }
}

// Função que tratará os eventos
function funcaojs(event) {
  console.log(`Evento ${event.type} disparado em um ${event.target.tagName}`)
}
<input type="text" data-events="(click, keydown)=funcaojs" />
<button data-events="(click)=funcaojs">Pressione-me</button>

<h1 data-events="(mouseenter, mouseleave)=funcaojs">Passe o mouse</h1>

Nota: utilizei em todos os eventos a função funcaojs para simplificar o código e por ela já exibir a mensagem de log no console, mas pode alterar e definir a função que desejar.

Com JavaScript, utilizando o prototype

Como mostrado nas outras respostas, é possível adicionar uma função a um evento através do addEventListener, mas o mesmo não aceita mais de um evento, precisando assim chamar a função para cada evento que deseja tratar. Ou você pode se beneficiar do prototype do JavaScript, pois com ele você pode definir novos métodos aos seus elementos sem interferir, necessariamente, no comportamento natural do mesmo.

Assim, podemos criar a função addEventsListener (perceba Events no plural) de forma que aceite uma lista de eventos para uma mesma função, fazendo basicamente o que precisa:

HTMLElement.prototype.addEventsListener = function (events, listener) {
  for (let event of events) {
    this.addEventListener(event, listener)
  }
}

E, com isso, podemos chamar o método addEventsListener em qualquer elemento HTML que desejarmos passando a lista de eventos:

input.addEventsListener(['click', 'keydown'], funcaojs)

Ficaria mais ou menos assim:

// Define a função no prototype
HTMLElement.prototype.addEventsListener = function (events, listener) {
  for (let event of events) {
    this.addEventListener(event, listener)
  }
}

// Define a função que tratará os eventos
function funcaojs(event) {
  console.log(`Evento ${event.type} disparado em um ${event.target.tagName}`)
}

// Atribui a função aos eventos
const input = document.querySelector('input')

input.addEventsListener(['click', 'keydown'], funcaojs)
<input type="text" />

Nota: a função nativa addEventListener aceita mais que dois parâmetros, então seria interessante que a função definida addEventsListener tratasse os mesmos parâmetros para manter todo tipo de compatibilidade entre as chamadas. Para simplificar, só implementei os dois primeiros, que são o evento e a função que trata o mesmo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .