¿Cómo manejar eventos de JavaScript en HTML?

Cuando hablamos de eventos, nos referimos a cambios en el estado de un objeto. La interacción de JavaScript con HTML se gestiona a través de estos eventos, que ocurren cuando el usuario o el navegador manipulan una página. Al agregar código JavaScript junto con HTML, JS reacciona a los eventos y permite la ejecución de acciones. Este proceso se llama manejo de eventos. Así que, JS maneja los eventos de HTML usando controladores de eventos. Existen diferentes tipos de eventos, como onclick, keydown, keyup, focus, load, entre otros.

Eventos del Mouse

Estos son eventos que ocurren según la interacción del mouse:

• onclick: Se activa cuando el usuario hace clic en un elemento.
• onmouseover: Sucede al colocar el cursor sobre el elemento.
• onmouseout: Ocurre cuando el usuario desplaza el cursor fuera del elemento.
• onmousedown: Se activa al presionar el mouse sobre el elemento.
• onmouseup: Sucede al soltar el mouse sobre el elemento.
• onmousemove: Se activa cuando el usuario mueve el mouse.

Eventos del Teclado

Estos eventos son activados según la interacción con el teclado:

• onkeydown: Sucede al presionar una tecla.
• onkeyup: Se activa al soltar la tecla.

Eventos de Formularios

Algunos eventos relevantes para los formularios incluyen:

• onfocus: Ocurre cuando el usuario enfoca el mouse sobre un elemento.
• onsubmit: Se activa cuando el usuario envía el formulario.
• onblur: Sucede cuando se pierde el foco del elemento del formulario.
• onchange: Se activa cuando se modifica el valor de un elemento.

Eventos de Ventanas/Documentos

Finalmente, tenemos eventos relacionados con la ventana o el documento:

• onload: Se activa cuando el navegador completa la carga de la página.
• onunload: Ocurre cuando el usuario abandona la página actual.
• onresize: Se activa cuando el usuario redimensiona la ventana del navegador.

Ahora, veamos cómo podemos escribir un evento en este contexto.

Creación de un evento onclick

Para ilustrar esto, crearemos un botón y, al hacer clic en ese botón, generaremos un mensaje de alerta.

Primero, vamos a crear un controlador. Desde este controlador, renderizaremos la plantilla, y durante la renderización también podemos pasar los valores que deseamos incluir en la plantilla.

from odoo import http, _
from odoo.http import request

class OnclickExample(http.Controller):
    @http.route(['/testing'], type='http', auth="public", website=True)
    def onclick_example(self, **kw):
        return request.render("event_module.example_onclick")

Fuente: https://www.cybrosys.com/blog/how-to-handle-javascript-events-in-html

A continuación, escribamos un archivo XML.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="example_onclick" name="onclick">
        <t t-call="website.layout">
            <div class="example_event">
                <button class="btn btn-primary alert_onclick">Alerta
                </button>
            </div>
        </t>
    </template>
</odoo>

Aquí, hemos creado una plantilla con la id example_onclick y hemos agregado un botón denominado "Alerta". Para este botón, hemos creado una clase llamada alert_onclick, sobre la cual escribiremos un evento onclick. También hemos agregado otra clase example_event que utilizaremos como selector al escribir el código JS.

Código JavaScript para el evento onclick

Ahora, escribamos el código JS para el evento onclick.

odoo.define('event_module.example', function (require) {
    "use strict";
    var Dialog = require('web.Dialog');
    var core = require('web.core');
    var _t = core._t;
    const publicWidget = require('web.public.widget')
    publicWidget.registry.websiteEvents = publicWidget.Widget.extend({
        selector: '.example_event',
        events: {
            'click .alert_onclick': '_alert_onclick',
        },
        _alert_onclick: function (ev) {
            Dialog.alert(this, _t("Alerta al hacer clic en el elemento"), {
                title: _t('onclick'),
            });
        },
    })
});

En el código anterior, hemos importado el Dialog y core para crear un mensaje de alerta y definir el título y mensaje de la alerta. Hemos extendido el widget público, y al hacerlo, hemos escrito un selector, en el cual hemos dado el nombre de la clase, lo que significa que podemos escribir eventos para todas las clases e ids correspondientes a esa clase.

Luego, en la sección de eventos, indicamos qué eventos deben tener lugar. El ‘.’ después del evento de clic indica que se trata de una clase. Si fuera un id, utilizaríamos ‘#’. alert_onclick es la clase del elemento, y _alert_onclick es el nombre de la función.

Dentro de la función, hemos agregado una alerta de diálogo para que se muestre un mensaje al hacer clic en el botón, tal como se muestra en la imagen de abajo.

Fuente: https://www.cybrosys.com/blog/how-to-handle-javascript-events-in-html

Así es como podemos escribir eventos en JavaScript.

¿Necesitas ayuda?

Si deseas implementar esto en tu empresa o necesitas una guía más personalizada, estoy aquí para ayudarte.

Ofrecemos servicios como:

• Consultoría e implementación de Odoo
• Desarrollo de módulos personalizados
• Migración de datos y sistemas
• Capacitación y formación de usuarios
• Soporte técnico y mantenimiento
• Auditoría de sistemas ERP
• Integración con sistemas existentes

¡Contacta conmigo para una consulta gratuita o agenda una demo personalizada! Estoy seguro de que juntos podremos llevar tu proyecto al siguiente nivel.