如何使用 vanilla JavaScript 将数据集属性从事件目标传递到函数参数

Question

我有一个函数可以根据作为参数传递的对象动态创建数据可视化。

我将对象的名称存储在事件目标的数据属性中。然后我根据该属性设置函数参数。

这是一个例子：

  <div>
      <button data-object="countries">click me</button>
    </div>

    <script>
      const countries = [
        { location: "United States", type: "country" },
        { location: "Canada", type: "country" },
      ];
      let button = document.querySelector("button");
      console.log(countries);

      const countriesFunction = (data) => {
        console.log(event.target.dataset.object);
      };

      button.addEventListener("click", (event) => {
        countriesFunction(event.target.dataset.object);
      });

函数“countriesFunction”未将事件目标的数据属性识别为预定义对象。而是将其视为字符串，在我的例子中会引发错误。

我已经尝试 JSON 解析，但出现解析错误。

有没有办法 link 使用对象提高目标的数据属性值？

Answer 1

data-object 包含文本 countries。要将该值用作变量，您需要使用 eval，这是不可取的。

而是将您的 countries 放入其自己的对象中，并将数据集用作对象路径的一部分。您需要使用方括号表示法来访问对象成员。这使您可以使用任何表达式（如变量解析）作为对象成员。

  const myData = {
   countries: [
    { location: "United States", type: "country" },
    { location: "Canada", type: "country" },
   ]
  };

  const countriesFunction = (data) => {
    console.log(myData[data]);
  };

  button.addEventListener("click", (event) => {
    countriesFunction(event.target.dataset.object);
  });

如何使用 vanilla JavaScript 将数据集属性从事件目标传递到函数参数

How do I pass dataset attributes from an event target to a function parameter using vanilla JavaScript

javascript

object

event-handling