eventManager es una pequeña librería escrita en javascript diseñada para capturar y manejar eventos del DOM y re asignarles funciones definidas por usted. Es simple y poderosa y solo pesa solo 1Kb.
También puede leerlo en: English
Puede ver una demo online.
1) Importe la librería Javascript en su página, automáticamente se iniciará y capturará todos los eventos que sucedan en el DOM.
<head>
<script
src="https://galiprandi.github.io/eventManager/eventManager.min.js"
defer
></script>
</head>2) Asigne los eventos que desea manejar especificando atributos en los elementos HTML. Puede usar cualquier elemento del DOM como se muestra en los siguientes ejemplos y puede capturar cualquier evento disponible en el navegador.
Los nombres de los eventos llevan un prefijo 'em' para evitar colisiones con otras librerías. El: emClick captura el evento 'click'.
<body emKeyup="handleKeyUp">
<img emClick="handleClick" src="imagen.jpg" />
<h1 emClick="handleClick">Este es un título</h1>
<button emClick="handleClick">Botón de Logging</button>
<span emClick="handleClick">Texto sencillo</span>
</body>3) Defina las funciones y las acciones a realizar con cada evento capturado. Recuerde que puede asignar mas de una función por evento.
<script>
/**************************************************************
Puede acceder el evento desde la variable event.
O al elemento que disparó en evento accediendo a event.target
**************************************************************/
function handleClick(){
alert(`Click en: ${event.target.tagName}`)
console.log(event)
}
function handleKeyUp(){
if (event.key === "F2") {
// Hacer algo
}
}
</script>También puede disparar más de una función si las declara separas por un espacio, como se muestra en el siguiente ejemplo:
<button emClick="fnUno fnDos fnTres">Botón de Logging</button>-
Chequear compatibilidad y solucionar posibles errores.
-
Agregar funciones
-
Escribir documentación
-
Mejorar la documentación
-
Traducir la documentación