Javascript 事件委派和余烬操作中的全局“Event”对象_Javascript_Ember.js

Javascript 事件委派和余烬操作中的全局“Event”对象

javascript ember.js

Javascript 事件委派和余烬操作中的全局“Event”对象,javascript,ember.js,Javascript,Ember.js,今天我学到了一些关于余烬的知识。这正是我想在代码中使用的东西。不过有一个小问题。当我从 <div ondragend={{action "dragEnd"}}></div> 所以，我有一些关于这项技术的问题：有人能告诉我这有多合法吗？任何地方都没有记录我是否正确理解，在我使用closured操作（）的情况下，它不会使用事件委派，也就是说，它会将事件处理程序附加到该div，而不会像我使用此模式（）时那样附加到主体首先，为什么要迁移到{{action“dragEnd”

今天我学到了一些关于余烬的知识。这正是我想在代码中使用的东西。不过有一个小问题。当我从

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

所以，我有一些关于这项技术的问题：

有人能告诉我这有多合法吗？任何地方都没有记录

我是否正确理解，在我使用closured操作（

）的情况下，它不会使用事件委派，也就是说，它会将事件处理程序附加到该

div

，而不会像我使用此模式（

）时那样附加到

主体

首先，为什么要迁移到

{{action“dragEnd”on=“dragEnd”}

？这是最古老的余烬行动方式，你不应该使用它们。使用

ondragend={{action“dragEnd”}}

或更好的

{{on“dragEnd”this.dragEnd}}

当使用带有

@action

装饰的新操作时。如果您在

操作

散列中有操作，请使用

{{on“dragEnd”（操作“dragEnd”）}

虽然这是一个浏览器功能，但我不会使用它！参考MDN：

应避免在新代码中使用此属性

这是正确的。基本上：

```
{action
```
修饰符（在
```
{action
```
之前不使用
```
=
```
的情况下使用）将不会附加任何本机事件处理程序，而是等待事件冒泡到
```
主体
```
，在该主体中必须已注册事件（ember对预设事件列表执行此操作）然后使用余烬内部处理机制触发您的操作。这基本上是从过去开始的，你应该离开它
当您执行
```
eventname={{action
```
时，您将使用
```
{{action
```
帮助程序。虽然它与修饰符具有相同的名称，但它根本不是同一件事。
```
{{action
```
helper只需在类的
```
actions
```
散列中找到该操作，创建一个绑定的操作，该操作可能带有传递的参数，并将其绑定到正确的
```
this
```
。然后将该结果操作分配给HTML DOM元素的
```
eventname
```
属性。很长一段时间以来，这是一种非常常见的做事方式，但从来都不是官方首选的方式。然而，这仍然是一种很好的做事方式。主要的缺点是，您不能向同一事件添加多个操作。因此
```
onclick={{action“foo}}}onclick={{action”bar}
```
在同一元素上无法工作
新的
```
{{on
```
修饰符是使用ember octane的新方法。它基本上运行
```
addEventListener
```
。这允许添加多个处理程序作为
```
{{action
```
修饰符可以，但使用的ember magic要少得多，直接将事件添加到DOM元素中，而不使用自定义事件委派的任何奇怪的magic。但是它不执行任何操作查找。因此，第二个参数直接需要是一个绑定函数，可以传递给
```
addEventListener
```
。对于ember octane，您可以直接在类上定义动作，并向其添加
```
@action
```
装饰器，这将基本上创建一个具有正确
```
此
```
上下文的绑定函数（它还将该函数添加到
```
动作
```
散列中，以添加与
```
{{action
```
修饰符和帮助器的兼容性）。对于经典样式的操作，您可以使用
```
{{action
```
帮助程序查找该操作，然后将其传递给
```
{{on
```
修改器。然后基本上生成
```
{{on“click”（action“myAction”）}
```

那么该怎么办：

尽可能避免使用
。请远离它

将经典样式的组件/类与

Component.extend一起使用时({

使用

哦，这是一个多么有见地的答案！你能告诉我一些关于性能方面的事情吗？因为我有很多元素需要绑定事件，我认为在我将处理程序放在主体上的地方使用此事件委托将对我有所帮助。而且还有可能在组件定义中创建操作处理程序是不是还有什么要避免的？是的，我会避免组件中的动作处理程序，而且性能并不是真正的问题。这是几年前的事了，但是在所有当前的浏览器中，有很多事件处理程序不是问题。如果你有一个巨大的列表，这本身就是一个性能问题，不管你是否附加事件。
<div {{action "dragEnd" on="dragEnd"}}></div>

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