Establecer onClick con JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Establecer onClick con JavaScript
Tahseen Tauseef 30 enero 2023
JavaScript JavaScript EventListener JavaScript EventHandler
  1. ¿Qué es un Event y EventListener en JavaScript?
  2. Cómo agregar un EventListener onClick a un elemento en JavaScript
  3. Cómo pasar una referencia de un elemento a un EventListener onClick en JavaScript
  4. Cómo agregar EventListener onClick a Jquery en JavaScript
Establecer onClick con JavaScript

En este tutorial, discutiremos cómo adjuntar un oyente onClick a un elemento usando JavaScript; discutiremos:

  • ¿Qué es un Event y EventListener o EventHandler en JavaScript?
  • Cómo agregar un EventListener onClick a un elemento
  • Cómo pasar una referencia a un EventListener onClick
  • Cómo agregar EventListener onClick usando Jquery

¿Qué es un Event y EventListener en JavaScript?

Un evento es algo que hace un navegador o un usuario final. Estos eventos pueden ser manejados por un concepto de JavaScript llamado Event Handlers o Event Listeners. Un Event Listener se ejecuta cuando ocurre un evento en particular.

onClick es uno de estos Event Listeners. Un detector de eventos onClick se activa / ejecuta cuando un usuario hace clic en un elemento.

Cómo agregar un EventListener onClick a un elemento en JavaScript

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor()">
            Change Color to Red
        </div>
        <script>
            function ChangeColor() {
              document.getElementById("textElement").style.color = "red";
            }
        </script>

    </body>
</html>

El código anterior dispararía / ejecutaría el método ChangeColor, que accederá al elemento, utilizando el modelo de objeto Document, teniendo un id de textElement y cambiando su color de texto a rojo.

Observe que onClick se establece como una propiedad de un elemento en HTML similar a class, id, etc.

Alternativamente, puede establecer el atributo onClick de un elemento directamente usando JavaScript.

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
          document.getElementById("textElement").onclick = function() {
             document.getElementById("textElement").style.color = "red";
          };
        </script>

    </body>
</html>

Esto accederá al textElement y le asignará una función; esta función se ejecutará cuando el usuario haga clic en el elemento HTML, el resultado será similar. Por ejemplo, el color del elemento que tiene un id de textElement se cambiaría a rojo.

Además, puede utilizar el método / función addEventListener del elemento JavaScript para realizar la misma funcionalidad.

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
            let element = document.getElementById("textElement");
             element.addEventListener("click", function(){
                 element.style.color = "red";
             });
        </script>

    </body>
</html>

El addEventListener toma dos argumentos; el primero es el tipo de evento a escuchar en un elemento HTML, y el segundo es la función de devolución de llamada que se ejecutaría cuando ocurre un evento determinado.

Si está utilizando Internet Explorer, el addEventListener no funcionará debido a problemas de compatibilidad. Tendríamos que usar una alternativa usando attachEvent para replicar este comportamiento.

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
            let element = document.getElementById("textElement");
            if(element.addEventListener){
               element.addEventListener('click', function(){
                    element.style.color = "red";
               });
            }else if(element.attachEvent){
               element.attachEvent('onclick', function(){
                    element.style.color = "red";
               });
            }
        </script>

    </body>
</html>

Cómo pasar una referencia de un elemento a un EventListener onClick en JavaScript

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor(this,'red')">
            Change Color to passed Color
        </div>
        <script>
           function ChangeColor(element,color) {
              element.style.color = color;
           }
        </script>

    </body>
</html>

En el ejemplo, pasamos dos argumentos, this y red, this pasa una referencia a un elemento del DOM a la función, mientras que red es sólo una cadena.

Puede notar que con solo cambiar el segundo argumento, podemos cambiar el color del elemento. Este enfoque aumenta la reutilización en comparación con el otro enfoque. Por ejemplo, podemos utilizar el método ChangeColor con varios elementos.

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor(this,'red')">
            Change Color to Red
        </div>
        <div id="textElement" onclick="ChangeColor(this,'blue')">
            Change Color to Blue
        </div>
        <script>
           function ChangeColor(element,color) {
              element.style.color = color;
           }
        </script>

    </body>
</html>

Cómo agregar EventListener onClick a Jquery en JavaScript

Si no está usando Vanilla JavaScript pero está usando algo como Jquery, una biblioteca de JavaScript, el proceso es similar; la única diferencia es la sintaxis.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">	
    </script>
    
    <script>
    $(document).ready(function(){
      $("#textElement").click(function(){
        $(this).css('color','red')
      });
    });
    </script>
</head>
    <body>

    <div id="textElement">Change Color to Red</p>

    </body>
</html>

Agregará un detector de eventos al elemento que tenga un id de textElement tan pronto como se cargue el documento.

Artículo relacionado - JavaScript EventListener