vnng-eventjs 是一个基于 JavaScript 的事件处理库，它可以轻松地为 Web 应用程序中的 DOM 元素添加事件处理程序。利用此库可以快速实现事件委托、事件控制、事件拦截等功能。
安装 vnng-eventjs
在使用 vnng-eventjs 之前，需要先安装它。可以通过以下方式安装：
--- ------- ------------
使用 vnng-eventjs
在安装 vnng-eventjs 后，可以在需要的文件中引入该库：
------ ----- ---- ---------------
添加事件处理程序
在 HTML DOM 元素上添加事件处理程序很简单。我们可以使用 Event.on(target, type, listener) 方法来添加。
----- --- - -------------------------------
------------- -------- -------------
-------- ------------- -
----------------
-事件委托
通过 vnng-eventjs 可以使用事件委托代替循环绑定事件。如下面的代码所示，为一个父元素添加了三个子元素，在子元素上都绑定了点击事件，现在我们来实现一下事件委托。
---- ---------------
------- --------------------------
------- --------------------------
------- --------------------------
----------- ------ - ----------------------------------
---------------- -------- --------- --------------- -
------------------------------------
---在上面的代码中，我们为父元素添加了点击事件处理程序，但是只有子元素被点击时才会触发。'.child' 就是一个简单的事件选择器。
事件控制
事件控制是个非常经典的操作，经常使用到。通过 vnng-eventjs，我们可以轻松地启用和禁用事件。
----- --- - -------------------------------
------------- -------- -------------
-------- ------------- -
----------------
-------------- -------- ------------- -- -------
-如上代码所示，通过 Event.off(target, type, listener) 可以禁用事件。当然，如果要启用事件也非常简单。我们可以使用 Event.on(target, type, listener) 来重新启用该事件。
拦截事件
vnng-eventjs 可以通过 Event.stopPropagation(event) 来阻止事件冒泡。
---- ---------------
------- -------------------------
----------- ------ - ----------------------------------
----- ----- - ---------------------------------
--------------- -------- --------------- -
----------------------
-----------------------------
---
---------------- -------- ---------- -
----------------------
---如上代码所示，当子元素被单击时，父元素不再响应单击事件。
总结
以上就是 vnng-eventjs 的一些常规应用。可以看出 vnng-eventjs 丰富的 API 能够大大提高我们的前端开发效率，减少代码量，使得代码更加优雅简洁。希望大家在实际前端开发中能够使用 vnng-eventjs 更好地进行事件处理。
------ ----- ---- ---------------
----- --- - -------------------------------
----- ------ - ----------------------------------
----- ----- - ---------------------------------
-------- ------------- -
----------------
-------------- -------- ------------- -- -------
-
------------- -------- -------------
---------------- -------- --------- --------------- -
------------------------------------
---
--------------- -------- --------------- -
----------------------
-----------------------------
--
---------------- -------- ---------- -
----------------------
---来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600567aa81e8991b448e3f89