JavaScript为动态生成的标签绑定事件-参数

最新推荐文章于 2021-03-16 11:32:27 发布
最新推荐文章于 2021-03-16 11:32:27 发布
阅读量4.3k 收藏 2
点赞数 2
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a12331244/article/details/75299092
版权
本文介绍了JavaScript如何为动态生成的标签绑定事件并传递参数。虽然JavaScript通常只支持传入一个参数，但这个参数是一个包含丰富信息的对象，尤其是其"path"属性，可以用来访问和控制与事件相关的标签。通过对"path"的解析，可以实现对动态生成标签的精确操作。
摘要由CSDN通过智能技术生成

熟悉用C#,Java语言的人都知道，为一个动态生成的控件绑定事件都有固定的事件参数，而JavaScript同样可以传递参数。
不同的是JavaScript一般只支持传递一个参数，而且，这个参数是一个复杂的对象：
event参数
可以看到传递的参数是一个十分复杂的类，大多数属性都可以通过属性名识别，这里对path左下解析。
“path”展开后，可以看到从内到外一次排列的标签（对象）名。
path
一般情况下，我们为标签绑定事件是为了控制这个标签，在静态绑定的事件中，可以以“this”进行方便的传递，而动态绑定的事件则可以通过这一“path”属性达到访问标签的效果。

<body>
最低0.47元/天 解锁文章
Grey Sun
关注
专栏目录
vue动态绑定事件、传递参数
m0_51431448的博客
08-15 188
vue动态传递不确定个数的参数到子组件这个还是经常用的，动态绑定不确定个数的事件就不太常用了，写这篇也是因为自己没有好好看官方文档，所以来记录一下。下面的代码示例就采用vue2了，vue3也是一样的。相信大家对vue的父传子已经很熟悉了。假设子组件接受下面三个参数： 那我们父组件可以单独传递： 也可以一块儿通过v-bind直接传递整个对象，相当于将对象中的进行结构全部传递，官网也有写：https://cn.vuejs.org/api/built-in-directives.html#v-bind
js实现动态创建的元素绑定事件
10-21
下面小编就为大家带来一篇js实现动态创建的元素绑定事件。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS为动态生成的元素绑定事件
Doggy的博客
02-09 2826
JS 生成的元素事件绑定注意事项标签： Jquery, addEventListner, removeEventListener, onclick如果页面要通过 ajax 接入数据，那么很多页面元素可能都是等到数据进来后才通过 JavaScript 生成的。如果我们要给生成的元素绑定 click blur focus 等事件，那么因为 ajax 异步传输的特性，可能数据还没有获取到，我们要绑定事件的
动态生成的dom元素如何绑定事件
weixin_30485379的博客
09-12 311
两种类型1、$('li').bind('click',function(){}); 当你用js动态添加li的时候，你添加的li不具有你绑定的事件。这种写法与$('li').click(function(){})一样。2、$('li').live('click',function(){}); 当你用js动态添加li的时候，你添加的li具有你绑定的事件 转载于:https://www.cnblogs....
页面生成时js动态生成的标签绑定事件
qq_42147034的博客
12-09 1181
      直接由选择器为页面加载时生成的标签（脚本生成的标签）不能直接用一般方式绑定事件。       由jquery的on()来为当前选择器的子标签绑定多个事件：             使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）       下例中的父选择器person_show是必须已经存在的！在绑定其动态生成的子标签ul下的li下的a标...
在js中动态添加标签并绑定事件给事件动态传餐问题解决方案
weixin_45932733的博客
03-16 324
最近在开发时遇到一个棘手问题，就是在js里循环的插入标签组，想要给里面的按钮添加绑定事件，并动态的传递参数，不管我怎么写就是获取不到当前标签组的 i ，然后就找到以下两种方法用作记录。 第一种 传递一个参数 let abc = '<a οnclick=subButton(\''+data.index+'\')><i class="fa fa-cloud-upload"></i>删除</a>' 第二种() 传递多个参数 let abc = '<a ο
动态的绑定事件addEventListener方法的使用
09-04
然后，我们在`<body>`标签内使用`addEventListener`方法将`test`函数动态地绑定到ID为`but1`的按钮的`onclick`事件上。这意味着当用户点击这个按钮时，`test`函数会被调用。 ```html function test() { window....
老生常谈js动态添加事件--- 事件委托
10-21
总结来说，JavaScript中的事件委托是一种优雅且高效的处理动态元素事件的技术，它利用了事件冒泡机制，使得开发者能够为动态添加的元素以及大量元素绑定事件而不会造成性能问题。掌握事件委托技术对于编写高效、可...
【学习笔记】JavaScript动态的为元素添加带参数和不带参数的事件
dfkjasdh的博客
10-29 192
目前的的页面布局都是基于XHTML,通过DIV+CSS布局,实现DHTML的样式。所以这个JavaScript动态的为元素添加事件因此而普遍了。下面我说说怎样通过javascript为元素动态的添加事件.Javascript为元素动态的添加事件包括两种情况：不带参数的事件和带参数的事件。一、不带参数的事件：两种方式：直接给对象添加事件,节点添加事件例如给一个id为tab1的添加onclick事件第...
JS事件的绑定，回调函数
xxhsym的博客
03-02 1847
<script type="text/javascript"> window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ /*addEventListenner() -通过这个方法可以为事件绑定响应函数 -参数 1.事件的字符不要on 2.回调函数，当事件触发...
javascript动态添加事件方法详解 || Javascript attachEvent传递参数的办法
liu163710的专栏
03-11 1475
有时候我们需要用javascript动态添加事件，这就涉及到浏览器的兼容性问题，以下是几种常见的方法，我们也常常混合使用。 <br />方法一、setAttribute <br />var obj = document.getElementById("obj");  <br />obj.setAttribute("onclick", "javascript:alert('测试');");  <br />这里利用 setAttribute 指定 onclick 属性，简单，很好理解，  <br />但是：IE
input标签内容改变触发的事件
weixin_33937913的博客
11-19 643
原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data){ console.log(data.value); } onchange事件在内容改变且失去焦点的时候触发。即，失去焦点了内容未变不触发，内容变了未失去焦点也不实时触发...
【整合】input标签JS改变Value事件处理方法
weixin_30647065的博客
09-10 342
　　某人需要在时间控件给文本框赋值时，触发事件函数。实现的效果： 　　1、文本框支持手工输入，通过用户输入修改值，手工输入结束后触发事件。阻塞在于失去焦点后才触发（输入过程中不触发事件） 　　2、通过JS方法修改值，修改后触发事件。重点阻塞在于此（JS赋值要触发） 　　 　　最终采用方案： 　　1、IE（IE8及以下）下使用onpropertychange实现JS赋值后触发事件 　　2...
javascript 属性改变事件: onpropertychange
SiC B2B2C Shop大型B2B2C商城软件产品，使用Java语言开发，高性能高扩展性高安全性分布式。可帮助你快速的建立大型B2B2C电商系统
04-20 550
属性改变事件: onpropertychange 是不太常用,但很有用的事件. 当对象的属性改变时,触发此事件. IE7支持onpropertychange事件, 可是firefox不支持这个事件.
js中的change事件
weixin_34208283的博客
03-27 6192
当元素的值发生改变时，会发生 change 事件。 change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。 语法： $(selector).change(function{});$("select[name='表单名']").change(function(){}）; 转载于:https://www.cnblogs.com/lsbaiwyl...
Javascript的change事件
liubihang的专栏
11-26 3349
不知道是什么时候就形成的概念一直以为，js的onchange事件是在文本值更改的时候触发事件源。直到昨天写了一个插件的时候才发现，文本更改的时候，事件没有触发，而当输入框失去焦点的时候，事件才被触发。这根本和我实际想的有冲突了，查询了很久，也问了以写经常写js的人，确认了，虽然onchange是号称值改动是触发的事件，但是实际的触发原理是，在输入框失去焦点的时候在判断值是否更改，如果更改在触发事件
javascript内容改变（change）事件
weixin_44830974的博客
05-08 8714
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <select name="" id="slt"> <option va...
给标签添加onchange事件_Js -- 事件应用案例
weixin_39710106的博客
01-12 1230
Ⅰ 开关灯案例点击按钮实现团变色<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开关灯案例</title> <style> #d1 { height: 200px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Grey Sun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值