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