js onclick等事件传递对象

最新推荐文章于 2024-09-04 09:04:27 发布

原创最新推荐文章于 2024-09-04 09:04:27 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #jsp

JAVA WEB菜鸟专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在JavaScript中正确处理对象传递，包括使用JSON.stringify避免特殊字符转义，并提供了一个示例，展示了如何在onclick属性中安全地拼接JSON字符串。关键在于理解转义双引号和单引号的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 传递对象需要注意的点：特别是拼接html onclick等方法时

1、传递前转json字符串

1)JSON.stringify(obj)

2)注意json对象内部可能特殊转义字符，这里以最常见和最容易出错的双引号和单引号为例

.replace(/\"/g, "&quot;")
.replace(/\'/g, "\\\'")

2、方法接收后转JSON

JSON.parse(objStr);

一段示例代码奉上(拼接onclick,注意各个双引号单引号处理)，仅供参考

return "<a href=\"javascript:;\"" +
    " onclick=\"showDetail('"+column.gs+"','"+(JSON.stringify(column).replace(/\"/g, "&quot;").replace(/\'/g, "\\\'"))+"','"+row.key_id+"','"+field+"','"+title+"','"+row[field]+"\')\">"
    +value +"&nbsp;&nbsp;<i class=\"fa fa-hand-o-down\"></i></a>";

function showDetail(url,column,key_id,field,title,fieldVule) {
    var column_=JSON.parse(column);
    ......
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

java资深菜鸟

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript中onclick事件传递数组参数时接收的是[object,object]，需要转为字符串传递

acoolgiser的博客

01-26

1061

将数组参数转换为JSON字符串是一个很好的做法，这样可以确保数组中的数据以正确的格式传递给函数。在JavaScript中定义button的onclick点击事件，传递参数的时候，某个参数是数组，在方法体里面接收到的值是[object,object]。一开始在网上找解决办法，使用JSON.stringify(arr)传递数组参数，还是不行，出现解析失败问题。我传递了两个参数给点击事件方法modifyFunc，第一个参数是字符串，第二个参数是数组。参数仍然是数组，那么你可能需要使用。如果你在函数中接收的。

javascript setTimeout()传递函数参数(包括传递对象参数)

12-07

在给定的示例中，作者遇到的问题是如何在`setTimeout`中传递对象参数。常规的做法是直接传递函数名和参数，但这在需要传递对象时会变得复杂。作者尝试了一种方法，将函数和参数用字符串拼接，如`setTimeout("fun(" +...

参与评论您还未登录，请先登录后发表或查看评论

js onclick事件方法传递参数为对象

Danger

04-01

8396

选择适合自己场景得方法 1.传json对象 var object= {id: 123, name: 'name1', age: 10}; var jsonObj = '<a οnclick="dotest(' + JSON.stringify(object).replace(/"/g, '"') + ');">json对象传递</a>'; 2.传j...

js onclick传递对象

Alex的博客

04-03

1141

在html onclick中如果参数直接传递一个参数js会报错。如果想要onclick传递参数需要这么做： var obj = {id: 1, name: 'jimc', age: 20}; 传json对象 var jsonObj = '<a onclick="show(' + JSON.stringify(obj).replace(/"/g, '"') + ...

js中onclick方法传递对象变量、普通变量

谁的博客

07-17

2380

描述动态的传递参数实施传递对象变量传递字符串比传递对象多了前后两个 \' -- 反斜线+单引号 var data = ...; //获取的数据集合 var html=""; for(i in data) { //传递json对象 html = '<a onclick="method(' + JSON.stringify(data[i]).rep...

A标签中通过href和onclick传递的this对象实现思路

12-03

当涉及到在`<a>`标签上同时使用`href`属性和`onclick`事件时，`this`对象的行为可能会变得复杂，特别是在想要传递当前元素引用给一个处理函数时。本文将详细解释这个问题，并提供解决思路。首先，`this`关键字在...

JavaScript学习笔记之JS事件对象

11-26

JavaScript中的事件对象是编程交互的核心，它记录了与事件相关的各种信息，如事件类型、触发事件的元素、鼠标坐标等。当用户执行某些操作（如点击按钮、移动鼠标）时，浏览器会创建一个事件对象，这个对象包含了这些...

js onclick事件传参讲解

10-26

关于JavaScript中的onclick事件传参，首先需要理解onclick事件的基本概念。在HTML中，onclick事件是元素的一种事件监听器，当用户点击该元素时，会触发一个定义好的JavaScript函数。这是实现用户交互的一种常见方法...

js onclick传参对象_JS传参技巧总结

weixin_39610759的博客

12-03

1013

JS传参技巧总结1.隐式创建 html 标签这种方法一般配合ajax，上面的value使用了模板引擎2.window['data']window['name'] = "the window object";3.使用localStorage，cookie等存储window.localStorage.setItem("name", "xiaoyueyue");window.localStorage.g...

javascript对于onclick事件传值不可以直接传对象的解决办法

sky21sjwzk的博客

03-30

1524

我们可以使用内置的json处理函数进行处理 JSON.stringify(obj).replace(/“”/g,“'”),经过这样处理函数接受到就会变成对象进行处理。Js在渲染 Dom 节点的时候，是要用的字符串拼接形式,所以在对于onlcick事件参数，我们应该转化为字符串的形式进行拼接。我们要将传递的参数先转化为一个json的字符串，并且若在需要的时候再吧json字符串用双引号转化为单引号即可。javascript对于onclick事件传值不可以直接传对象的解决办法。

JS 给对象 onclick 方法传参数妙招

SakuraZZ的专栏

08-21

4319

table里某一行的每个单元格添加一个onclick事件如果只用匿名函数赋值(如:function(){cellClick((newRow.rowIndex-1),i);})的话,结果是这一行的每一个单元格cellClick方法的参数都是一样的. 为了解决每个单元格传递参数不同的问题,以下比较龌龊也是比较巧妙的方法诞生了,给每一个单元格价格vl属性,把i 扔过去....

JS中onclick方法调用函数时如何传递对象参数

weixin_39593900的博客

07-16

4159

今天在拼接字符串时加入了onclick事件出发的函数需要传递参数对象，结果遇到了一些问题，特此记录 ajax接收请求成功后的数据，在回调函数里进行拼接第一次拼接 success : function(data){ for(var i=0; i<data.length; i++){ ...

js onclick 传递字符串类型的参数（js 拼接html 的几种方式，传递数组出现 [object,object]）

a123123sdf的博客

03-16

7917

js onclick传递字符类型的参数，报not defined；

在js渲染的dom中的事件中传递对象

xiaohua0708day的博客

09-04

597

在某些情况下，可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中，可以将对象数据序列化为 JSON 字符串，存储在data-*自定义属性中。

js 拼接HTML字符串 onclick事件传多个参数问题

最新发布

02-27

### 如何在 JavaScript `onclick` 事件处理程序中传递对象作为参数对于希望向 `onclick` 事件处理程序传递额外的对象参数的需求，存在多种实现方法。一种常见的方式是利用闭包来捕获外部变量环境中的值。 #### 使用匿名函数创建闭包通过使用匿名函数包裹实际的事件处理器，可以在调用时将所需的数据绑定进去： ```javascript const button = document.getElementById('myButton'); let myObject = { key: 'value' }; button.onclick = (function(obj) { return function(event) { console.log(`Event target is ${event.target.id}, object passed:`, obj); }; })(myObject); // 立即执行并传入要传递的对象 ``` 这种方法确保每次点击按钮触发回调时都能访问到最初定义好的对象实例[^1]。 #### 利用箭头函数简化语法现代 JavaScript 提供了更简洁的方式来表达相同逻辑——采用箭头函数形式： ```javascript const button = document.getElementById('myButton'); let myObject = { key: 'value' }; // 直接内联声明对象，并将其作为参数传递给箭头函数 button.addEventListener('click', () => handleButtonClick(myObject)); function handleButtonClick(data){ console.log(`Handling click with data: `, data); } ``` 此方案不仅保持了代码清晰度还提高了可读性和维护性[^2]。 #### 结合数据属性存储关联信息另一种策略是在 DOM 元素上设置自定义属性保存需要传输的信息，在事件触发后再从中提取出来： ```html <button id="dataAttrBtn" data-info='{"key":"another value"}'>Click Me</button> <script> document.querySelector('#dataAttrBtn').addEventListener('click', function(e){ let infoObj = JSON.parse(this.getAttribute('data-info')); console.log(infoObj.key); }); </script> ``` 这种方式特别适用于那些动态生成多个相似功能组件的情况，因为可以直接从元素本身获取配置而不必担心作用域污染问题[^5]。上述几种技术都可以有效地解决在 `onclick` 或者其他类型的事件监听器里传送复杂结构化数据的问题。选择哪种取决于具体应用场景和个人偏好。