在 onclick javascript 中传递对象

在前端开发中，我们经常需要创建点击事件，比如点击按钮触发某个操作。当我们需要传递复杂的数据时，可以使用对象来传递。本文将介绍如何在 onclick javascript 中传递对象。

使用JSON.stringify()

JSON.stringify() 可以将一个 JavaScript 对象转换为一个 JSON 字符串。我们可以将对象转换为 JSON 字符串，然后将它作为参数传递给 onclick 函数，再在 onclick 函数中使用 JSON.parse() 来将参数转换为 JavaScript 对象。

例如，假设我们有一个对象：

let obj = {name: 'Alice', age: 20, gender: 'female'};

我们可以将它转换为 JSON 字符串：

let objStr = JSON.stringify(obj);

然后，在 onclick 函数中传递 objStr：

<button onclick="myFunction('${objStr}')">Click me</button>

注意，我们在 onclick 函数中使用了模板字面量来将 objStr 作为字符串传递给 myFunction() 函数。在函数中，我们可以将字符串转换为 JavaScript 对象：

function myFunction(objStr) {
  let obj = JSON.parse(objStr);
  console.log(obj);
}

结果将打印出：

{ name: 'Alice', age: 20, gender: 'female' }

使用data-属性

另一种方法是使用 HTML5 中 data-* 属性来传递对象。在 HTML 元素中添加属性 data-，可以将数据存储在元素中。我们可以设置一个 data- 属性来存储对象，然后将元素传递给 onclick 函数。在 onclick 函数中，我们可以使用 dataset 属性来访问 data- 属性。

例如，我们使用以下 HTML 代码：

<button id="myBtn" data-obj ='{"name":"Alice", "age":20, "gender":"female"}'>Click me</button>

然后，在 JavaScript 中获取该元素并将它传递给 onclick 函数：

let myBtn = document.getElementById("myBtn");
myBtn.onclick = function() {
  let obj = JSON.parse(this.dataset.obj);
  console.log(obj);
}

在 onclick 函数中，我们使用 this.dataset.obj 来获取 data-obj 属性，然后使用 JSON.parse() 将其转换为 JavaScript 对象。

以上是在 onclick javascript 中传递对象的两种方法，根据你的实际需要来选择合适的方法。