npm 包 yaver 使用教程

前言

在前端开发中，我们经常需要根据用户的行为或者数据的变化动态地修改页面上的内容，从而提升用户的交互体验，Yaver 就是一个这样的工具库，它是一个事件委托库，可以帮我们在 DOM 元素上注册事件，并执行相应的处理函数。下面我们分步骤来探讨 Yaver 的使用。

安装

在终端中运行下面的命令来安装 Yaver：

npm install yaver --save

引入

在项目中使用 Yaver，我们需要使用一个 bundler 工具（如 webpack、rollup 等）将它构建进我们的脚本中。

在使用的脚本文件中引入 Yaver：

import Yaver from 'yaver';

注册事件

使用 Yaver 可以绑定多种类型的事件，包括 click 、mouseover 等等。下面以 click 事件为示例，首先需要获取需要绑定事件的 DOM 元素，然后使用 Yaver.on() 函数注册事件，如下：

<button id="btn">点击</button>

const btn = document.getElementById('btn'); 
const handler = function(event) { 
  console.log('按钮被点击了'); 
}; 
Yaver.on(btn, 'click', handler); 

以上代码中，我们获取了按钮元素，给它注册了 click 事件，并绑定相应的处理函数 handler。当按钮被点击时，控制台会输出 '按钮被点击了'。

解除事件

同样可以使用 Yaver 提供的 Yaver.off() 函数来解除之前注册的事件，如以下示例所示：

Yaver.off(btn, 'click', handler);

以上代码中，我们解除了之前注册的 click 事件。

委托事件

在开发中，有时候我们需要一种机制，让事件处理程序能够在同一个元素上处理多个事件。这时候我们可以使用事件委托机制。

比如我们有一个列表，我们需要点击列表中的每一项都响应相应事件。一种方法是给每一项都绑定一个事件，但是当我们有很多项时，这种方式就显得非常麻烦。而使用事件委托机制，我们只需要给列表的外层元素注册一个 click 事件，然后在事件处理函数中通过事件对象的 target 属性来判断是哪一个子元素被点击了，从而进行相应的处理。

下面以一个简单的示例来演示事件委托的使用：

<ul id="list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
</ul>

const list = document.querySelector('#list');

Yaver.on(list, 'click', function(e) {
  const target = e.target;
  if (target.nodeName === 'LI') {
    console.log(target.textContent);
  }
});

以上代码中，我们获取了列表元素，给它注册了 click 事件，判断了点击事件的目标元素是否是列表中的子元素，如果是，则输出子元素的文本内容。

总结

Yaver 是一个轻量级的事件委托库，可以帮助我们注册、解除事件，并且支持事件委托机制。它的 api 简单易用，使用起来也非常方便，可以大幅提升我们前端的开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66f18