Añadiendo eventos a un elemento div con Javascript

Agregar eventos a los elementos div en Javascript es una técnica común para mejorar la interactividad en un sitio web o en web apps. En este artículo, aprenderemos cómo utilizar JavaScript para añadir eventos a un elemento div, permitiendo que responda a acciones como clics del mouse y pulsaciones de teclas.

Añadiendo eventos a un elemento div

Agregar evento a un elemento div

Suponiendo que estamos creando una web app y queremos crear un elemento DIV que al dar click por encima del mismo ejecute una función en específico.

Entonces el primer paso es crea el elemento DIV con su respecto id o name por los cuales puede ser accedido. En este caso vamos a crear un div con el id click-div, que será llamado desde Javascript.

<div tabindex="0" role="button" id="click-div"> Puedes hacer click sobre mí </div>

Agregar la función con Javascript

const clickHandler = (event) => {
  window.alert(`The ${event.currentTarget.nodeName} element has been clicked!`);
};

const clickableDiv = document.getElementById('click-div');
clickableDiv.addEventListener('click', clickHandler);

// when using a div add a keydown event listener for keyboard users
clickableDiv.addEventListener('keydown', (event) => {
  if (event.code === 'Space' || event.code === 'Enter') {
    clickableDiv.click();
  }
});

Mediante JavaScript, hemos definido una función clickHandler que se activará cuando se haga clic en el elemento div. En este ejemplo, utilizamos window.alert para mostrar un mensaje de alerta que indica que se ha hecho clic en el elemento.

Utilizamos getElementById para obtener el elemento div mediante su ID y lo asignamos a la variable clickableDiv. A través de addEventListener, añadimos un evento de click al elemento, de manera que cuando se haga click en el div, se llame a la función clickHandler que muestra una alerta.

Además, hemos añadido un evento de teclado para mejorar la accesibilidad. Si se presiona la tecla "Espacio" o "Enter" mientras el elemento div está enfocado, se simula un clic en el botón utilizando clickableDiv.click(). Esto permite que los usuarios que navegan con el teclado también puedan interactuar con el elemento.

Código compleeto

He aquí el codigo completo. Copia, pega y guarda como un archivo html. 

<html>
<body>

<div tabindex="0" role="button" id="click-div">Click me</div>
<script>

const clickHandler = (event) => {
  window.alert(`The ${event.currentTarget.nodeName} element has been clicked!`);
};

const clickableDiv = document.getElementById('click-div');
clickableDiv.addEventListener('click', clickHandler);

// when using a div add a keydown event listener for keyboard users
clickableDiv.addEventListener('keydown', (event) => {
  if (event.code === 'Space' || event.code === 'Enter') {
    clickableDiv.click();
  }
});
</script>
</body>
</html>

En este artículo, hemos explorado cómo utilizar eventos de click y teclado en un div, permitiendo que los usuarios interactúen con él de diferentes maneras.

Tags:
Artículo Anterior Artículo Siguiente