简介
knockout-delegated-events 是一个针对 Knockout.js 的插件，它提供了一种方便的方式来处理委托事件。通过使用该插件，您可以将事件处理程序添加到父元素中并自动处理其子元素以及动态添加到 DOM 中的元素。
安装
你可以通过 npm 进行安装：
npm install knockout-delegated-events
使用
1. 引入插件
在 HTML 页面中引入 knockout-delegated-events 插件：
<script src="path/to/knockout.js"></script> <script src="path/to/knockout-delegated-events.js"></script>
2. 绑定事件处理函数
在 Knockout.js 的 ViewModel 中使用 $delegatedHandlers 属性来绑定事件处理函数：
-- -------------------- ---- -------
--- --------- - -
------------ -------------- ------ -
----------------------- ----- --------------
--
------------------- -
------ -
------------- -------------
-
-
--
----------------------------在上面的示例中，当点击具有 .my-button 类名的元素时，handleClick 函数将被调用并传递元素数据和事件对象。
3. 动态添加元素
如果您的代码需要动态添加元素，并且您希望这些元素也能够使用委托事件，请在添加元素后调用 $applyDelegatedEvents 方法：
var newElement = document.createElement("div");
newElement.className = "my-button";
document.body.appendChild(newElement);
viewModel.$applyDelegatedEvents();4. 取消绑定事件处理函数
如果您需要取消绑定事件处理函数，请使用 $delegatedHandlers 属性中的 null 值来替换它们：
viewModel.$delegatedHandlers.click[".my-button"] = null;
示例代码
下面是一个完整的示例，演示了如何使用 knockout-delegated-events 处理点击事件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ----------
------- -------------------------------------------------------------------------------------
------- -----------------------------------------------------------
-------
------
------- --------------- ----------------- -------------------------
---- -------------- ------------------------------ ------- --------------- ---------------------
--------
--- --------- - -
--------- -----------------------
------------ -------------- ------ -
-------------- - - -----------
--
----------- ---------- -
------------------------- ----- ----- ---
----------------------------------
-
--
----------------------------
-- ------
------------------------- ----- ------ ---
---------
-------
-------在上面的示例中，点击添加按钮将向 elements observableArray 添加新元素，并调用 $applyDelegatedEvents 方法以处理新添加的 .my-element 元素。当用户点击任何元素时，handleClick 函数将在 ViewModel 中调用，并显示被点击元素的文本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38297