Manejo de eventos

En la plantilla de un componente, resulta útil poder registrar controladores en elementos DOM para algunos eventos específicos. Esto es lo que hace que una plantilla esté activa. Esto se hace con la directiva t-on. Por ejemplo:

<button t-on-click="someMethod">Do something</button>

Esto se traduciría aproximadamente en javascript así:

button.addEventListener("click", component.someMethod.bind(component));

El sufijo (click en este ejemplo) es simplemente el nombre del evento DOM real. El valor de la expresión t-on debe ser una expresión de JavaScript válida que evalúe una función en el contexto del componente actual. Por lo tanto, se puede obtener una referencia al evento o pasar algunos argumentos adicionales. Por ejemplo, todas las siguientes expresiones son válidas:

<button t-on-click="someMethod">Do something</button>
<button t-on-click="() => this.increment(3)">Add 3</button>
<button t-on-click="ev => this.doStuff(ev, 'value')">Do something</button>

Observe el uso de la palabra clave this en la función lambda: esta es la forma correcta de llamar a un método en el componente en una función lambda.

Se podría utilizar la siguiente expresión:

<button t-on-click="() => increment(3)">Add 3</button>

Pero entonces, la función de incremento puede no estar vinculada (a menos que el componente la vincule en su función de configuración, por ejemplo).

Modifiers

Para eliminar los detalles del evento DOM de los controladores de eventos (como las llamadas a event.preventDefault) y permitir que se centren en la lógica de datos, se pueden especificar modificadores como sufijos adicionales de la directiva t-on.

Modificador	Descripción
.stop	llama a event.stopPropagation() antes de llamar al método
.prevent	llama a event.preventDefault() antes de llamar al método
.self	llama al método solo si event.target es el elemento mismo
.capture	enlaza el controlador de eventos en modo captura
.synthetic	definir un controlador de eventos sintético (ver a continuación)

<button t-on-click.stop="someMethod">Do something</button>

Tenga en cuenta que los modificadores se pueden combinar (por ejemplo, t-on-click.stop.prevent) y que el orden puede ser importante. Por ejemplo, t-on-click.prevent.self evitará todos los clics, mientras que t-on-click.self.prevent solo evitará los clics en el elemento en sí.

Por último, se toleran los manejadores vacíos, ya que podrían definirse únicamente para aplicar modificadores. Por ejemplo,

<button t-on-click.stop="">Do something</button>

Esto simplemente detendrá la propagación del evento.

Eventos sintéticos

En algunos casos, adjuntar un controlador de eventos a cada elemento de listas grandes tiene un costo nada desdeñable. Owl ofrece una forma de mejorar el rendimiento de manera eficiente: con el evento sintético, en realidad agrega solo un controlador en el cuerpo del documento y llamará al controlador de manera adecuada, tal como se espera.

La única diferencia con los eventos regulares es que el evento se captura en el cuerpo del documento, por lo que no se puede detener antes de que llegue allí. Como puede resultar sorprendente en algunos casos, no está habilitado de forma predeterminada.

Para habilitarlo, simplemente se puede usar el sufijo .synthetic:

<div>
    <t t-foreach="largeList" t-as="elem" t-key="elem.id">
        <button t-on-click.synthetic="doSomething" ...>
            <!-- some content -->
        </button>
    </t>
</div>

Sobre los componentes

La directiva t-on también funciona en un componente secundario:

<div>
    in some template
    <Child t-on-click="dosomething"/>
</div>

Esto capturará todos los eventos de clic en cualquier elemento html contenido en el subcomponente “Hijo”. Tenga en cuenta que si el componente hijo se reduce a uno (o más) nodos de texto, al hacer clic en él no se llamará al controlador, ya que el navegador enviará el evento en el elemento padre (un “div” en este caso).