javascript - Ember 操作中的事件委托(delegate)和全局 `event` 对象

Question

今天我了解了一些关于 event delegation 的知识。在 Ember 中。整个事情正是我想在我的代码中使用的。不过有一个小问题。当我从

迁移时

<div ondragend={{action "dragEnd"}}></div>

至

<div {{action "dragEnd" on="dragEnd"}}></div>

然后我就无法获取 event我的操作方法中不再有参数，问题是我需要它来访问 event.clientX/Y 。 This answer提到可以简单地删除参数 event并像这样“全局”使用它

...
actions: {
  dragEnd() {
    event.blahblah...
  }
}

所以，我对这项技术有一些疑问:

1. 谁能告诉我这有多合法？它没有在任何地方记录。
2. 我是否正确理解，在我使用关闭操作 ( <div ondragend={{action "dragEnd"}}></div> ) 的情况下，它不会使用事件委托(delegate)，即它将事件处理程序附加到 div 。而不是 body就像根据 doc 所做的那样如果我使用这种模式(<div {{action "dragEnd" on="dragEnd"}}></div>)？

Answer 1

首先，为什么您要迁移到 {{action "dragEnd" on="dragEnd"}} ？ 这是最古老的 Ember Action 风格，你不应该使用它们。 使用ondragend={{action "dragEnd"}}或更好 {{on "dragEnd" this.dragEnd}}当使用用 @action 装饰的新操作时。 如果您在actions中有您的行动哈希使用{{on "dragEnd" (action "dragEnd")}} .

同时 window.event 是一个浏览器功能，我不会使用它!引用MDN:

You should avoid using this property in new code

正确。基本上:

• {{action 修饰符(在 = 之前不使用 {{action )不会附加任何 native 事件处理程序，而是等待事件冒泡到 body其中事件必须已经注册(ember 为预设的事件列表执行此操作)，然后使用 ember 内部处理机制来触发您的操作。 这基本上是过去的事情，您应该远离它。
• 当你这样做时eventname={{action您使用 {{action helper 。虽然它与修饰符具有相同的名称，但它根本不是同一件事。 {{action助手只是在 actions 中找到操作您的类上的哈希，使用可能传递的参数创建一个绑定(bind)操作，并将其绑定(bind)到正确的 this 。然后将此结果操作分配给 eventname HTML DOM 元素的属性。 长期以来，这是一种非常常见的做事方式，但从来都不是官方首选的方式。然而，它仍然是一个很好的做事方式。主要缺点是您无法向同一事件添加多个操作。所以onclick={{action "foo}} onclick={{action "bar}}在同一个元素上不起作用。
• 新{{on 改性剂是使用 ember 辛烷的新方法。它基本上运行addEventListener 。这允许添加多个处理程序作为 {{action修饰符确实如此，但使用的 ember 魔法要少得多，并直接将事件添加到 DOM 元素，而不使用任何奇怪的魔法与自定义事件委托(delegate)。但是它不执行任何操作查找。所以第二个参数直接需要是一个绑定(bind)函数，可以传递给 addEventListener 。对于 ember 辛烷，您可以直接在类上定义操作并添加 @action它的装饰器，这基本上会创建一个具有正确 this 的绑定(bind)函数上下文(它还将函数添加到 actions 哈希中，以添加与 {{action 修饰符和帮助器的兼容性)。对于经典风格的操作，您可以使用 {{action helper 查找操作，然后将其传递给 {{on修饰符。那么你基本上会得到 {{on "click" (action "myAction")}} .

那么该怎么办:

• 尽量避免<button {{action "myAction" on="click"}}>只要有可能。迁移远离。
• 当使用 Component.extend({ 的经典样式组件/类时使用<button onclick={{action "myAction}}>或<button {{on "click" (action "myAction")}}> .
• 当使用 native 类和/或 glimmer 组件时，您的操作会用 @action 装饰。装饰器使用<button {{on "click" this.myAction}}> .