原生JS - onclick事件内传递参数

已于 2022-02-14 15:02:32 修改
阅读量3.6k 收藏 3
点赞数 2
分类专栏： javaScript 文章标签： javascript html 前端
于 2022-01-27 11:21:22 首次发布
TKP
本文链接：https://blog.csdn.net/TKP666/article/details/122714397
版权

今天用原生写JS，查到数据后渲染页面，点击事件内传递对应的参数

    var html = "";
	let pathUrl = "" //跳转链接
	//开始以为是这样写的，发现不行 会报错
	html += '<div class="card" οnclick="goPath('+ pathUrl +' )">跳转</div>'
	//正确写法应该是这样
	html += '<div class="card" οnclick="goPath(\'' + pathUrl + '\')">跳转</div>'
	$('.cardList').html(html);
敲代码的TKP
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态添加事件并可传参数示例代码
12-01
代码如下: var tt=function(obj) { return function() { alert(obj.tagName); //可以为外部定义的一个执行函数； } } function addfunction() { var bigobj=document.getElementById(“mytable”); var rows =bigobj.rows; for(var j=0; j<rows.length; j++) { for(var i=0;i<rows[j].cells.length;i++) { rows[j].cells[i].attachEvent(“onmouse
原生js onclick事件
qq_15058425的博客
05-08 5277
项目中遇到一个小问题和解决方案： html： handle()>体积男 需要通过button点击，获取input的值，而且事件只能放在button里面，无法用jQuery的click() 解决方法： function修改：handle(this),则html如下： html： handle(this)>体积男 js： fun
在JS（JavaScript）中，常见的点击事件（click）修饰符
最新发布
weixin_52231116的博客
06-04 852
本文主要介绍在JS（JavaScript）中，常见的点击事件（click）修饰符。
JS 中 onclick 事件四种传参方式
热门推荐
稚枭天卓
11-02 4万+
1、在页面中给方法传参数，有如下的两种方法： 方法1，onclick=cancel(id，patientId); 在js文件中定义cancel方法 如果要把当前对象传过去用onclick="cancel(this,id,patientId)" js中cancel（obj，id，patientId） 方法2，在js中用 代码示例: jquery$(function(){ va
【JS】原生JS事件绑定onclick和addEventListener
mooonyuan的博客
04-11 3万+
onclick绑定方式 优点： - 简洁 - 处理事件的this关键字指向当前元素 缺点： - 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序，当使用window.onload属性时，会覆盖采用相同方法所绑定的事件代码 this与event查一不大 推荐使用event...
拼接原生js onclick方法传值
彦楠的博客
01-24 4771
【代码】拼接原生js onclick方法传值。
原生js，onclick与addEventListener区别
兵临城下的专栏
07-05 1545
onclick添加的事件会被覆盖 addEventListener可以添加多个事件，先后执行var d=document.getElementById("btn"); //这个事件会被覆盖不会执行 d.onclick=function(){ console.log(1); } //这个事件正常执行 d.onclick=function(){ console.log(1); } /**/ /
js 原生方法 -- 模拟浏览器的 点击事件
palmer_kai的博客
10-29 2万+
js 原生方法 – 模拟浏览器的 点击事件 1. 创建自定事件并监听 可看看 MDN 的 Evnet， CustomEvent 对象 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" conte
js原生点击事件三种写法
weixin_51070638的博客
06-27 4854
【代码】js原生点击事件三种写法。
Android原生java语句 和html js互相调用 传递参数
08-20
本教程将详细介绍如何在Android中通过Java语句与HTML中的JavaScript进行互调，并传递参数。 首先，我们需要在Android项目中引入`WebView`组件。在XML布局文件中添加一个`WebView`： ```xml android:id="@+id/...
兼容firefox的给每一个onClick再附加一个事件
09-06
首先，我们来理解一下原生JavaScript中的事件处理方式。在JavaScript中，有多种方法可以给元素添加事件监听器，包括`addEventListener`、`attachEvent`（IE浏览器特有）以及直接在HTML属性中设置`onClick`等。但这些...
js绑定事件，并动态传参
03-06
js绑定事件，并动态传参，比如绑定click事件。js绑定事件，并动态传参，比如绑定click事件。 js绑定事件，并动态传参，比如绑定click事件
react-ReactEvent声明式的方式来处理React组件外部内部事件
08-15
这里的`handleClick`就是我们的事件处理器，React会自动将事件对象作为参数传递给这个函数。这种绑定方式让React组件更易于理解和测试，因为所有的行为都集中体现在组件的props中。 React事件名称遵循camelCase命名...
Ajax基础之原生js封装
01-08
本篇文章将探讨如何使用原生JavaScript封装一个Ajax函数，以便更好地复用代码和处理各种请求情况。 首先，我们要识别在Ajax请求中可能会变化的部分： 1. 请求方式：GET或POST。 2. 请求URL：指定服务器接口的地址。...
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
10-18
在本文中，我们将深入探讨如何使用原生JavaScript（JS）实现AJAX（Asynchronous JavaScript and XML）通过POST方法与PHP进行交互。AJAX允许我们在不刷新整个页面的情况下更新部分网页内容，提高用户体验。我们将看到...
原生js给一个元素绑定click事件（三种实现方法）
dyx19971026的博客
11-28 2万+
原生js给一个元素绑定click事件（三种实现方法） 第一种直接在DOM元素绑定 <div id="btn" οnclick="one()"></div> //直接在DOM里绑定事件 <script> 　　　　function one(){ 　　　　 alert("hello"); 　　　　} </script> 第二种在js代码中绑定...
JS绑定事件，传递参数
T_P_F的博客
12-31 3012
绑定事件的两种方式 1. 方式一（在属性上绑定事件） <div onclick=“ck('hello')” id=“div”></div> <script> function ck(str){ console.info(str); } </script> 注意：在属性上绑定事件，是方法的调...
原生js 动态添加元素和传参问题
朝花夕拾的博客
03-28 500
onclick传参问题 解决小技巧使用data-xxx属性 传参 只能传字符串 通过JSON.stringify() 使用的时候在转成对象获取。原生js input时间赋值。原生js给select赋值。给表格动态添加元素实例。
js 原生开发：实现页面带参跳转：从传参到接参，封装方法，实现一行代码精准接参（可传对象）iEieie
Mr. Ding的小博客
11-06 1101
目前知道两种方法 1.通过地址栏的跳转链接带参 页面1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <button type
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值