Llamar a una función de JavaScript mediante un evento onclick

1. Llamar a la función de JavaScript mediante el controlador de eventos onclick
2. Adjuntar una función de JavaScript a un elemento HTML mediante JavaScript puro
3. Definición de una función en el controlador de eventos onclick en el elemento HTML
4. Llamar a una función de JavaScript usando addEventListener

Incluso si diseñamos contenido HTML estático para una página web, es posible que deseemos que sea interactivo para el usuario. Los elementos HTML, por defecto, son tontos. La etiqueta <a> es interactiva con el usuario, pero se utiliza principalmente para cargar una ruta específica. Los elementos HTML como div se pueden hacer interactivos para el usuario agregándoles un controlador de eventos. Discutiremos uno de esos manejadores de eventos llamado manejador de eventos onclick. Hay un par de formas en las que podemos agregarlo a un elemento HTML.

Llamar a la función de JavaScript mediante el controlador de eventos onclick

Podemos vincular una función de JavaScript a un div usando el controlador de eventos onclick en el HTML o adjuntando el controlador de eventos en JavaScript. Hagamos referencia al siguiente código en el que adjuntamos el controlador de eventos a un elemento div.

<div id="interactive-div" onclick="changeMyColor('interactive-div')" style="cursor: pointer;">Click me</div>

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

El elemento div no acepta ningún evento de clic de forma predeterminada. En el código, vinculamos una función de JavaScript changeMyColor() al controlador de eventos onclick del div. Ahora hace que se pueda hacer clic en div. A pesar de que definimos un controlador de eventos onclick a un div, el usuario no sabrá si el div acepta un clic o no a menos que haga clic. Es una buena UI / UX tener el cursor marcado de manera diferente una vez que el usuario se desplaza sobre nuestro div objetivo. Para ello, asignamos un estilo en línea style="cursor: pointer;" al elemento div. Una vez que el usuario coloca el cursor sobre div, el cursor mostrará un signo de mano que indica que se puede hacer clic.

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

En el código JavaScript, definimos la función changeMyColor() pasada al evento onclick del div. La función toma el id del div como parámetro. Selecciona el elemento usando el document.getElementById(id) y cambia el color de fuente del elemento a azul usando la línea el.style.color = "blue";. Por lo tanto, asignamos una función de JavaScript al div y lo hicimos clic en él.

Adjuntar una función de JavaScript a un elemento HTML mediante JavaScript puro

En el último enfoque, declaramos el controlador de eventos onclick en el HTML. Hay una manera de mantener limpio el HTML y adjuntar una función JavaScript al elemento div o HTML correspondiente sin especificar ningún controlador de eventos onclick en el HTML. Aquí, asignamos el evento clic en JavaScript en lugar de utilizar HTML. Por lo tanto, este enfoque se basa puramente en JavaScript y mantiene limpio el HTML. Este estilo de programación se llama JavaScript discreto. Consulte el siguiente código para comprender mejor el concepto.

<div id="interactive-div" style="cursor: pointer;">Click me</div>

window.onload =
    function() {
  var el = document.getElementById('interactive-div');
  el.onclick = changeMyColor;
}

function changeMyColor() {
  var el = document.getElementById('interactive-div');
  el.style.color = 'blue';
}

Refiriéndonos al código anterior, hemos mantenido el HTML similar al código de muestra anterior. No agregamos ningún controlador de eventos onclick en el HTML. En su lugar, definimos el controlador de eventos onclick en JavaScript y adjuntamos la misma función changeMyColor en el código JavaScript. Hay un par de cosas a tener en cuenta aquí:

• Adjuntamos el detector de eventos onclick dentro de window.onload. Si no usamos el método window.onload, arrojará un error diciendo Uncaught TypeError: Cannot set property 'onclick' of null. Esto sucede porque document.getElementById("interactive-div") intenta consultar el elemento con id interactive-div mientras se carga el HTML. Como la etiqueta <script> viene en la sección <head>, el código JavaScript ejecuta el contenido de la etiqueta <script> antes de cargar el div que reside en la etiqueta <body>. Por tanto, la función getElementById() no encontrará el elemento y devuelve null. Por lo tanto, arroja un error que dice que no puede establecer onclick de nulo.
• Otro punto a destacar es que asignamos la función al manejador de eventos onclick sin el paréntesis (). Si escribimos el.onclick = changeMyColor(); en lugar de el.onclick = changeMyColor;, ejecutará la función al cargar el HTML que no es lo que queremos. Por lo tanto, pasamos la referencia de función de changeMyColor al controlador de eventos onclick. Una vez que el usuario activa el evento onclick haciendo clic en el div, se produce la llamada a la función changeMyColor. Y el div se vuelve azul.

Definición de una función en el controlador de eventos onclick en el elemento HTML

Hay algunas formas más de llamar a una función de JavaScript en el evento onclick. Podemos definir el método en HTML. Pero no es una forma recomendada ya que desordena el HTML. Consulte el siguiente código para comprender mejor.

<div onclick="(function() { alert('hello there'); })()" style="cursor: pointer;">click me!</div>

Al hacer clic en div, el código anterior mostrará el texto hello there. Aquí, codificamos la definición de la función en línea en el HTML. Es un método en línea anónimo. Y no podemos usar la misma función en otro lugar ya que no tiene un nombre asociado. Las definiciones de funciones más extensas serán engorrosas y harán que la legibilidad del código sea deficiente.

Llamar a una función de JavaScript usando addEventListener

Una forma de agregar el controlador de eventos onclick era usar la función onclick. Hay otra forma que es más genérica y se puede usar para agregar muchos más detectores de eventos. Para eso usamos la función .addEventListener() de JavaScript. Esta función se puede utilizar en una interfaz de elemento, documento o incluso en un objeto de window. Podemos usar la función .addEventListener() para configurar una invocación de método cuando se activa un event en particular.

• Parámetros: Se necesitan un par de parámetros obligatorios: el tipo de evento, por ejemplo, clic, etc., y la función listener. La función listener se ejecuta cuando se activa el evento.
• Uso: consulte el siguiente código.

<div style="cursor: pointer;" id="interactive-div">click me!</div>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('interactive-div')
      .addEventListener('click', function() {
        alert('hello');
      });
});

Este estilo de codificación es puramente programación JavaScript discreta basada en JavaScript. Aquí, hemos agregado el oyente click usando la función .addEventListener() y para que esto funcione, tendremos que asegurarnos de que .getElementById("interactive-div") devuelve el elemento. Por lo tanto, envolvemos el código en el detector de eventos DOMContentLoaded en la interfaz de documento. De lo contrario, el código arrojará un error diciendo que no puede añadir event a un objeto null.