对于使用 Ember.js 框架的前端开发者来说，有时候需要在组件中监听特定的事件，以便执行相应的操作。 Ember.js 框架提供了一些内置的事件处理器，例如 click、focusIn 等等，但这些事件处理器并不一定能够满足我们的需求。这时候，我们就需要使用 ember-on-helper 这个 npm 包，来实现自定义事件处理器的功能。
安装
安装 ember-on-helper 很简单，只需要在你的 Ember.js 项目根目录下，使用 npm 或 yarn 命令安装即可。
npm install ember-on-helper
或者
yarn add ember-on-helper
使用
使用 ember-on-helper，要完成两个步骤：
- 在组件中引入
on方法。
import { on } from 'ember-on-helper';- 在组件的
actions中定义事件处理函数，并使用on方法注册事件处理器。
例如，我们要监听某个按钮的 touchstart 事件，并执行相应的操作，我们可以这样写：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - -- - ---- ------------------
------ ------- ------------------
------------------ -
--------------------------
---------------------- -------- ---- ------
--
-------------------- -
--------------------------
---------------------- ----- -- -- ------- ---- ------
--
--------------------- ---------------- --------------- -
------------------- ----------
-- -- --------- ---
--
---在上面的例子中，我们定义了一个名为 myCustomEventHandler 的事件处理函数，并使用 on 方法注册为 touchstart 事件的处理器。当按钮被按下时，myCustomEventHandler 函数将会被自动调用。在处理函数中，我们可以访问到事件对象 event，并进行相应的操作。
多个事件处理器
如果需要监听多个事件，可以在组件中定义多个事件处理函数，并使用多个 on 方法来注册。
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - -- - ---- ------------------
------ ------- ------------------
------------------ -
--------------------------
---------------------- -------- ---- ------
--
-------------------- -
--------------------------
---------------------- ----- -- -- ------- ---- ------
--
---------------------- ---------------- --------------- -
------------------- ----------
-- -- --------- ---
---
---------------------- ----------- --------------- -
------------------- ----------
-- -- --------- ---- ---
--
---在上面的例子中，我们定义了两个名为 myCustomEventHandler1 和 myCustomEventHandler2 的事件处理函数，分别注册为 touchstart 和 click 事件的处理器。
传递参数
如果需要传递参数给事件处理函数，可以在 on 方法的后面附加参数。
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - -- - ---- ------------------
------ ------- ------------------
--------------------- ---------------- ---------- --------------- ------ -
------------------- -------- -------- -------
-- -- --------- ---
--
---在上面的例子中，我们额外指定了一个参数 myParam，并在 on 方法的第二个参数位置传入。在事件处理函数中，我们可以通过第二个参数获取到这个值。
条件注册
如果需要根据某个条件来注册事件处理器，可以使用 if 选项。
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - -- - ---- ------------------
------ ------- ------------------
------------------ -----
--------------------- ---------------- -
--- -------------------
-- --------------- -
------------------- ----------
-- -- --------- ---
--
---在上面的例子中，我们定义了一个名为 isEventRegistered 的属性，为 true，表示处理函数已注册。在 on 方法的第二个参数位置，我们使用 if 选项，指定只有 isEventRegistered 属性为真时，事件处理函数才会触发。
移除注册
如果需要从组件中移除某个事件处理器，可以使用 removeListener 方法和注册时返回的值。
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - -- - ---- ------------------
------ ------- ------------------
--------------------- -----
------------------ -
--------------------------
-------------------------------- ---------------- --------------- -
------------------- ----------
-- -- --------- ---
----
--
-------------------- -
--------------------------
--------------------------------------------------
------------------ ------- ----------
-
---在上面的例子中，我们先定义了一个名为 myCustomEventHandler 的属性，并在组件的 didInsertElement 钩子函数里将其初始化为 on 方法的返回值。这样，事件处理器就被注册成功了。在组件的 willDestroyElement 钩子函数里，我们使用 removeListener 方法将事件处理器移除。注意，在移除事件处理器时，我们需要获取到注册时返回的值，并使用这个值调用 removeListener 方法。
总结
通过本篇文章，我们介绍了如何使用 npm 包 ember-on-helper 实现自定义事件处理器的功能。我们了解了如何在组件中引入 on 方法，以及如何在组件的 actions 中定义事件处理函数，并使用 on 方法注册为事件处理器。在示例代码中，我们演示了如何处理单个事件、多个事件、事件参数、条件注册和移除注册等案例。这些知识点对于熟练掌握 Ember.js 框架的开发者来说非常重要，可以提高您的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa3cb5cbfe1ea06103de