如何在动作处理程序中获取原始事件对象？

Question

我想阐明在操作处理程序中获取原始事件对象的方法。

To utilize an event object as a function parameter:

Define the event handler in the component (which is designed to receive the browser event object).

Or, assign an action to an inline event handler in the template (which creates a closure action and does receive the event object as an argument).

因此，为了在内联处理程序上获取事件对象，我们这样做：

hbs:

<form onsubmit={{action "submit"}}>

js:

actions: {
  submit(e) {
    console.log(e); // original event
  }
}

那么在组件中定义事件处理程序的第一个选项呢？

Answer 1

event handler in the component 表示组件上的函数被称为事件名称。它的 literally the first example here。正如文档所说：

Simply implement the name of the event you want to respond to as a method on your component.

所以当你这样调用你的组件时：

{{#double-clickable}}
  This is a double clickable area!
{{/double-clickable}}

这是组件的 js 代码：

import Component from '@ember/component';

export default Component.extend({
  doubleClick(e) {
    alert('DoubleClickableComponent was clicked!');
    console.log('and this is the event', e);
  }
});

然后doubleClick函数在相应标签上触发事件时接收事件。

但是，从长远来看，组件的相应标签将会消失。查看 Angle Bracket Invocation RFC and the Template only Components RFC. That concept is already completely removed from glimmer 个组件。

您仍然可以使用它并且当您仍然必须使用它时可能会有罕见的用例，但关闭操作是绝对是尽可能去的方式！

因此，当您拥有此模板时：

<button onclick={{action 'myAction' 10}}>Click me</button>

和对应的component.js:

actions: {
  myAction(n, e) {
    console.log(n); // the number 10
    console.log(e); // event
  }
}

还应该提到Event handler methods in components will usually receive an instance of jquery.Event as an argument。引用的 RFC 详细解释了这将如何随着 jQuery.

的删除而改变

如何在动作处理程序中获取原始事件对象？

How to get original event object in action handler?

javascript

ember.js