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.