Question

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

要将event对象用作函数参数：


在组件中定义事件处理程序（旨在接收浏览器事件对象）。

或者，将一个操作分配给模板中的内联事件处理程序（该操作将创建一个关闭操作，并且确实将事件对象接收为   一个论点）。

所以要在嵌入式处理程序上获取事件对象，我们这样做：

hbs：

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

js：

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

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

Answer 1

event handler in the component表示组件上称为事件名称的功能。其the dc.dataTable documentation。正如文档所述：

只需在组件上将要响应的事件的名称作为一种方法即可实现。

因此，当您像这样调用组件时：

{{#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函数会在相应标签上触发事件时接收事件。

但是，从长远来看，组件的相应标签将消失。看一下literally the first example here和Angle Bracket Invocation RFC。该概念已从Template only Components RFC个组件中完全删除。

您仍然可以使用它，并且当您仍然拥有使用它时，可能会出现一些罕见的用例，但是关闭操作绝对是可行的方法！

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

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

和相应的component.js：

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

还应该提到glimmer。引用的RFC详细说明了如何删除jQuery来改变这种情况。

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

1 个答案: