Ember动作中的事件委托与全局event对象问题

嘿，针对你遇到的这两个问题，我给你详细拆解下：

一、使用全局event是否合规？ #

这种用法绝对不推荐，也不符合Ember的最佳实践，原因如下：

• 全局event对象是浏览器早期的非标准实现，虽然多数浏览器还支持，但它在严格模式、异步执行场景或者多个事件触发时很容易出现不可预期的错误（比如事件对象被覆盖）。
• Ember官方完全没有文档提及这种用法，说明这不是框架认可的方式，后续版本甚至可能因为浏览器特性变化而失效。

正确获取事件对象的方式 #

其实在{{action "dragEnd" on="dragEnd"}}这种写法下，你只需要在动作方法中显式接收事件参数即可：

actions: {
  dragEnd(event) {
    console.log(event.clientX, event.clientY);
  }
}

如果你的Ember版本较新（比如Octane及以后），也可以使用修饰符写法，同样能直接拿到事件对象：

<div {{on "dragEnd" this.dragEnd}}></div>

对应的类方法：

dragEnd(event) {
  // 直接使用event
}

二、两种动作写法的事件绑定目标是否正确？ #

你的理解有一点小偏差，我帮你纠正：

• 闭包动作写法（<div ondragend={{action "dragEnd"}}></div>）：确实是直接将事件处理程序绑定到当前<div>元素上，没有使用事件委托。这种方式的优点是事件触发更直接，但如果页面上有大量这类元素，可能会有轻微的性能开销。
• {{action}}助手写法（<div {{action "dragEnd" on="dragEnd"}}></div>）：它使用的是事件委托，但委托的目标不是<body>，而是Ember应用的根容器（通常是#ember-application这类元素），而不是整个文档的body。框架会在根容器上监听事件，然后通过事件冒泡机制匹配到对应的元素，再执行动作。

内容的提问来源于stack exchange，提问作者Andrey Stukalin