<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manejo de Eventos en HTML y JavaScript</title>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<style>
:root {
--primary: #2563eb;
--secondary: #4b5563;
--accent: #10b981;
--light: #f3f4f6;
--dark: #1f2937;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f9fafb;
color: var(--dark);
line-height: 1.6;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.description {
max-width: 800px;
margin: 0 auto 30px;
font-size: 1.1rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.download-btn {
display: inline-block;
background-color: var(--accent);
color: white;
padding: 12px 24px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
margin: 20px 0;
cursor: pointer;
border: none;
transition: background-color 0.3s;
}
.download-btn:hover {
background-color: #059669;
}
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.event-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.event-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.event-card h3 {
color: var(--primary);
margin-bottom: 15px;
border-bottom: 2px solid var(--light);
padding-bottom: 10px;
}
.event-card p {
margin-bottom: 15px;
}
.code-example {
background-color: var(--light);
padding: 12px;
border-radius: 5px;
font-family: monospace;
font-size: 0.9rem;
overflow-x: auto;
margin-bottom: 15px;
}
.demo-area {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.demo-area h2 {
color: var(--primary);
margin-bottom: 20px;
text-align: center;
}
.demo-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.demo-btn {
padding: 10px 20px;
background-color: var(--primary);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.demo-btn:hover {
background-color: #1d4ed8;
}
.demo-output {
margin-top: 20px;
padding: 15px;
background-color: var(--light);
border-radius: 5px;
min-height: 100px;
}
footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: var(--secondary);
}
@media (max-width: 768px) {
.events-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<header>
<h1>Manejo de Eventos en HTML y JavaScript</h1>
<p class="description">Guía completa de todas las formas de manejar eventos en HTML y JavaScript con ejemplos prácticos y la posibilidad de descargar la información en formato Excel.</p>
</header>
<div class="container">
<button class="download-btn" onclick="exportToExcel()">Descargar en Excel</button>
<div class="events-grid">
<div class="event-card">
<h3>Atributos HTML inline</h3>
<p>Manejo de eventos directamente en los elementos HTML usando atributos como onclick, onmouseover, etc.</p>
<div class="code-example">
<button onclick="miFuncion()">Click me</button>
</div>
</div>
<div class="event-card">
<h3>Propiedades del objeto DOM</h3>
<p>Asignación de eventos mediante propiedades del objeto DOM como element.onclick.</p>
<div class="code-example">
element.onclick = function() {<br>
console.log('Click detectado');<br>
};
</div>
</div>
<div class="event-card">
<h3>addEventListener()</h3>
<p>Método moderno y recomendado para manejar eventos. Permite múltiples manejadores para el mismo evento.</p>
<div class="code-example">
element.addEventListener('click', function() {<br>
console.log('Click con addEventListener');<br>
});
</div>
</div>
<div class="event-card">
<h3>removeEventListener()</h3>
<p>Elimina manejadores de eventos previamente agregados con addEventListener().</p>
<div class="code-example">
element.removeEventListener('click', miFuncion);
</div>
</div>
<div class="event-card">
<h3>Delegación de eventos</h3>
<p>Manejo eficiente de eventos para múltiples elementos mediante un ancestro común.</p>
<div class="code-example">
parent.addEventListener('click', function(e) {<br>
if (e.target.tagName === 'LI') {<br>
console.log('Item clickeado');<br>
}<br>
});
</div>
</div>
<div class="event-card">
<h3>Eventos personalizados</h3>
<p>Creación y despacho de eventos personalizados según las necesidades de la aplicación.</p>
<div class="code-example">
const evento = new CustomEvent('miEvento', {<br>
detail: { mensaje: 'Hola' }<br>
});<br>
element.dispatchEvent(evento);
</div>
</div>
<div class="event-card">
<h3>Eventos de teclado</h3>
<p>Manejo de eventos relacionados con el teclado como keydown, keyup y keypress.</p>
<div class="code-example">
document.addEventListener('keydown', function(e) {<br>
console.log('Tecla presionada:', e.key);<br>
});
</div>
</div>
<div class="event-card">
<h3>Eventos de formulario</h3>
<p>Manejo de eventos específicos de formularios como submit, change, input, focus y blur.</p>
<div class="code-example">
form.addEventListener('submit', function(e) {<br>
e.preventDefault();<br>
console.log('Formulario enviado');<br>
});
</div>
</div>
<div class="event-card">
<h3>Eventos de mouse</h3>
<p>Manejo de eventos del ratón como click, dblclick, mousemove, mouseover, mouseout, etc.</p>
<div class="code-example">
element.addEventListener('mouseover', function() {<br>
console.log('Mouse sobre el elemento');<br>
});
</div>
</div>
</div>
<div class="demo-area">
<h2>Zona de Demostración</h2>
<div class="demo-buttons">
<button class="demo-btn" onclick="demoClick()">onclick</button>
<button class="demo-btn" id="domEvent">DOM Event</button>
<button class="demo-btn" id="listenerEvent">addEventListener</button>
<button class="demo-btn" onmouseover="demoMouseOver()" onmouseout="demoMouseOut()">Mouse Over/Out</button>
</div>
<div class="demo-output" id="demoOutput">
El resultado de las demostraciones aparecerá aquí.
</div>
</div>
</div>
<footer>
<p>Guía completa de manejo de eventos en HTML y JavaScript</p>
</footer>
<script>
// Datos para exportar a Excel
const eventosData = [
["Método", "Descripción", "Ejemplo"],
["Atributos HTML inline", "Manejo de eventos directamente en los elementos HTML", "<button onclick=\"miFuncion()\">Click me</button>"],
["Propiedades del objeto DOM", "Asignación de eventos mediante propiedades del objeto DOM", "element.onclick = function() { console.log('Click detectado'); };"],
["addEventListener()", "Método moderno y recomendado para manejar eventos", "element.addEventListener('click', function() { console.log('Click con addEventListener'); });"],
["removeEventListener()", "Elimina manejadores de eventos previamente agregados", "element.removeEventListener('click', miFuncion);"],
["Delegación de eventos", "Manejo eficiente de eventos para múltiples elementos", "parent.addEventListener('click', function(e) { if (e.target.tagName === 'LI') { console.log('Item clickeado'); } });"],
["Eventos personalizados", "Creación y despacho de eventos personalizados", "const evento = new CustomEvent('miEvento', { detail: { mensaje: 'Hola' } }); element.dispatchEvent(evento);"],
["Eventos de teclado", "Manejo de eventos relacionados con el teclado", "document.addEventListener('keydown', function(e) { console.log('Tecla presionada:', e.key); });"],
["Eventos de formulario", "Manejo de eventos específicos de formularios", "form.addEventListener('submit', function(e) { e.preventDefault(); console.log('Formulario enviado'); });"],
["Eventos de mouse", "Manejo de eventos del ratón", "element.addEventListener('mouseover', function() { console.log('Mouse sobre el elemento'); });"]
];
// Función para exportar a Excel
function exportToExcel() {
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(eventosData);
XLSX.utils.book_append_sheet(wb, ws, "Manejo de Eventos");
XLSX.writeFile(wb, "Manejo_Eventos_HTML_JavaScript.xlsx");
}
// Configuración de demostraciones
document.getElementById('domEvent').onclick = function() {
document.getElementById('demoOutput').innerHTML += '<p>Evento manejado mediante propiedad DOM</p>';
};
document.getElementById('listenerEvent').addEventListener('click', function() {
document.getElementById('demoOutput').innerHTML += '<p>Evento manejado con addEventListener</p>';
});
// Funciones de demostración
function demoClick() {
document.getElementById('demoOutput').innerHTML += '<p>Evento onclick ejecutado</p>';
}
function demoMouseOver() {
document.getElementById('demoOutput').innerHTML += '<p>Mouse sobre el botón</p>';
}
function demoMouseOut() {
document.getElementById('demoOutput').innerHTML += '<p>Mouse fuera del botón</p>';
}
// Evento de teclado para demostración
document.addEventListener('keydown', function(e) {
document.getElementById('demoOutput').innerHTML += `<p>Tecla presionada: ${e.key}</p>`;
});
</script>
</body>
</html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter