🦉 事件处理（Event Handling）🦉

事件处理（Event Handling）

在组件的模板中，能够在 DOM 元素上注册处理器以响应特定事件是非常有用的。这正是让模板“活起来”的原因。这通过 t-on 指令实现。例如：

xml

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

这将在 JavaScript 中大致被翻译为：

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

后缀（在此例中为 click）就是实际的 DOM 事件名称。t-on 表达式的值应该是一个在当前组件上下文中可求值为函数的有效 JavaScript 表达式。因此，我们可以获取事件的引用，或传递一些额外参数。例如，以下所有表达式都是合法的：

xml

<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>

注意在 lambda 函数中使用 this 关键字：这是在 lambda 函数中调用组件方法的正确方式。

也可以使用以下表达式：

xml

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

但此时，increment 函数可能未绑定（除非组件在其 setup 函数中进行了绑定）。

修饰符（Modifiers）

为了从事件处理函数中移除 DOM 事件的细节（如调用 event.preventDefault）并让它们专注于数据逻辑，可以通过 t-on 指令添加修饰符作为额外后缀。

修饰符	描述
`.stop`	在调用方法前调用 `event.stopPropagation()`
`.prevent`	在调用方法前调用 `event.preventDefault()`
`.self`	仅当 `event.target` 是元素自身时才调用方法
`.capture`	在捕获阶段绑定事件处理器
`.synthetic`	定义一个合成事件处理器（见下文）

示例：

xml

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

注意：修饰符可以组合使用（如 t-on-click.stop.prevent），而且顺序可能会影响行为。例如，t-on-click.prevent.self 将阻止所有点击事件，而 t-on-click.self.prevent 仅阻止元素自身的点击。

最后，空的处理器是允许的，可能仅用于应用修饰符。例如：

xml

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

这将仅阻止事件传播。

合成事件（Synthetic Events）

在某些情况下，为大量列表的每个元素附加事件处理器会带来不小的开销。 Owl 提供了一种有效提升性能的方法：合成事件。它实际上只在文档 body 上添加一个处理器，并能正确调用处理函数，如同常规事件那样。

与普通事件的唯一区别是，事件是在文档 body 上捕获的，因此它无法在到达那里之前被阻止。由于这种行为在某些情况下可能令人意外，因此默认是关闭的。

要启用它，只需使用 .synthetic 修饰符：

xml

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

用于组件（On Components）

t-on 指令同样适用于子组件：

xml

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

这将捕获 Child 子组件中任意 HTML 元素上的所有点击事件。注意：如果子组件只渲染为一个（或多个）文本节点，那么点击它不会触发处理器，因为浏览器会将事件分派给父元素（此例中是 div）。

🦉 事件处理（Event Handling）🦉 ​