生成的数据点击事件js(委托事件)

最新推荐文章于 2023-04-28 21:28:06 发布
最新推荐文章于 2023-04-28 21:28:06 发布
阅读量572 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuelang532777032/article/details/52196551
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

记得引入jquery
<br/>
<a href="javascript:void(0);" class="btn">生成要点击的数据</a>
<div id="list">
	
</div>


<script type="text/javascript" src="../public/js/jquery-2.0.3.min.js"></script>
<script>
	$(function(){
		$(".btn").click(function(){//点击生成数据
			$("#list").html('<p><a href="javascript:void(0);" class="doit">点我弹出1</a></p>')
		})
		
		
		$("body").on("click",".doit",function(){//生成的数据点击事件
			alert("1")
		})
		
		
	})
</script>
</body>
</html>



生成的数据 绑定事件的方法叫做  委托事件  2中委托事件  一种 delegate  一种 on    ，对了  别用delegate了，代码写起来太丑 太长。直接用on吧

雪狼之夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript的数据类型、事件委托、事件冒泡、call、apply、bind区别......今日份复习总结笔记，希望也可以帮到大家~
weixin_55437576的博客
04-10 836
HTML部分 Src和href区别 1.src是指向外资源的位置。指向内容嵌入到当前位置，将资源下载并应用到文档中。在加载该资源时会暂停其他资源的处理，直到该资源执行完毕。因此js文件应该放在底部。 2.href指向网络资源所在的位置，建立连接。在识别文件时，不会停止对当前文档的处理。 3.用link处理css文件而不是import 4.link属于html标签，在加载页面时会被同时加载，权重大于import，不存在浏览器兼容问题 5.import是css提供的，在页面加载完成后才会被加载，只在
js点击事件
2302_76143886的博客
01-06 264
js中的点击事件（click）的实现方式
UGUI点击事件（委托）
zdmqweasdzxc的博客
03-30 1261
using UnityEngine.UI; public class shi : MonoBehaviour {     GameObject[] btnss;     public GameObject text1;      public GameObject text2;      public GameObject text3;      public GameObject t
使用卓正PageOffice--数据区域点击事件
weixin_34337265的博客
09-11 452
2019独角兽企业重金招聘Python工程师标准>>> ...
html5 点击事件委托,Javascript 事件流和事件委托
weixin_31921223的博客
06-09 307
javascript 事件流和事件委托javascript和HTML之间的交互是通过事件实现的。事件就是用户或浏览器自身执行的某种动作，比如点击、加载，鼠标移入移出等等。DOM事件流DOM(文档对象模型)结构是一个树形结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。事件流描述的是从页面中接收事件...
JavaScript事件委托实例分析
10-24
2. **动态元素**：新添加的子元素也可以响应事件，无需额外绑定事件处理，适用于数据驱动的列表或者动态生成的元素。 3. **事件过滤**：可以根据实际触发事件的元素来决定是否执行特定的处理逻辑，提高了代码的...
JavaScript动态添加事件之事件委托
11-23
JavaScript动态添加事件，特别是事件委托，是前端开发中一种高效且灵活的事件处理方式。...理解并掌握事件委托是每个JavaScript开发者必备的技能，尤其是在处理大量交互元素或数据驱动的应用场景中。
JQuery事件委托原理与用法实例分析
10-17
即使是在事件绑定后动态添加的`<li>`元素，由于它们是`.list`的后代，也会受到委托事件的影响，因此无需为新元素单独绑定事件。 JQuery事件委托不仅可以应用于点击事件，还可以用于其他各种事件，如`blur()`, `...
jQuery代码优化 事件委托篇
10-28
总结起来，事件委托是一种有效的代码优化策略，它可以减少内存占用，提高性能，并处理动态生成的元素。在jQuery中，`.bind()`适用于静态页面，`.live()`解决了动态元素的事件绑定问题，但存在性能瓶颈，`.delegate()...
jQuery事件绑定和委托实例
11-30
jQuery事件绑定和委托是JavaScript库jQuery中用于处理用户交互的核心机制。它们允许开发者响应用户的动作，如点击、鼠标悬浮、键盘输入等。本文将详细解释这些概念，并通过实例展示其用法。 1. `on()` 方法 `on()` ...
js 一次按钮事件获取全部数据
记录踩过的坑只为了更好地填坑
04-07 814
div{ border: solid 1px red; width: 200px; height: 200px;} 点我    第一个方法： var mycar=new Array("df","dff","fdsf");  var dd=document.getElementById("hh");  for (var i=0;i   dd.innerHTML=d
JavaScript中的事件委托
m0_75198698的博客
04-28 187
当我们单击列表项时，事件会冒泡到 `myList` 元素，然后被处理程序捕获。然后我们检查目标元素 `event.target` 是否为 `LI` 元素，如果是，则输出被单击的列表项的内容。使用事件委托，我们只需要在祖先元素上绑定一个事件处理程序，并利用事件的冒泡机制来捕获事件，然后通过检查目标元素来确定哪个子元素被单击。而且，当我们单击子元素时，事件会在子元素和祖先元素之间进行冒泡，可能会导致性能问题。通过利用事件的冒泡机制，将事件处理程序绑定到它们的祖先元素上，从而减少了事件处理程序的数量。
js 事件传播机制、事件委托
weixin_43294560的博客
12-16 1058
当我们点击了一个事件， 首先做的的第一件事就是从外层的元素，直接穿梭到我们的目标元素，这个阶段会执行所有捕获阶段的函数。在dom节点 绑定过多的监听事件，必定造成内存浪费。所以就有一种优化： 就是事件委托。这时候事件流在沿着相反的方向一直向上执行所有函数。事件捕获阶段：从window对象传导到目标节点。然后事件流切换到目标阶段，执行自身的事件函数。冒泡阶段：从目标节点传回window对象。目标阶段：事件在目标节点上触发。
html5 点击事件委托,DOM事件委托详解
weixin_42360237的博客
06-09 433
什么是事件委托?对"事件处理程序过多"问题的解决方案,就是需要触发子事件时,只用给某父元素指定一个事件处理程序,就可以管理某一类型的所有事件.事件委托的原理和优点?1.原理: 事件冒泡当元素的事件被触发后，所有的父级元素的同名事件会被依次触发,子元素 -> 父元素 -> body -> html -> document -> window,IE8和之前的浏览器只到...
js事件传入数据（event对象）
weixin_30692143的博客
05-14 305
Example:向事件中传入任意的数据： 1 2 3 4 5 $("p").click( function (event, a, b) { // when a normal click fires, a and b are undefined // for a trigger like below a refers to "fo...
强大的js事件委托
jyd820226378的博客
07-19 358
什么是事件可以这样认为，我们在网页中的某个操作就是事件(有的操作对应多个事件)，例如:当我们点击一个按钮的时候，就触发了onclick事件 比如onload事件等等下边是一个简单添加点击事件的例子 element.addEventListener("click", function() { //操作 });addEventListener() 方法用于向指定元素添加事件句柄，使用
tabledata给数据添加点击事件
qq_40629751的博客
08-03 1092
//          $("#dynamic-table tbody").on("click", "tr td:eq(1)",function (){ //               $('#tab').modal('show'); //             }); //            $("#dynamic-table tbody ").on("click","td:eq(1).
JS 事件代理和事件委托
csdssdn的博客
05-18 2118
事件委托的概念理解 为什么叫事件委托？它还有一个名字叫事件代理。 JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托
javascript事件委托详解
weixin_47450807的博客
01-22 955
事件委派本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到
js 动态生成表格，点击行获取该行的数据
最新发布
05-26
可以使用 JavaScript 动态生成表格，并在点击每一行时获取该行的数据。以下是一个简单的示例： HTML 代码： ```html <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> </tbody> </table> ``` JavaScript 代码： ```js // 要显示的数据 var data = [ {name: "张三", age: 18, gender: "男"}, {name: "李四", age: 20, gender: "女"}, {name: "王五", age: 22, gender: "男"} ]; // 动态生成表格 var table = document.getElementById("myTable"); var tbody = table.getElementsByTagName("tbody")[0]; for (var i = 0; i < data.length; i++) { var row = document.createElement("tr"); row.innerHTML = "<td>" + data[i].name + "</td><td>" + data[i].age + "</td><td>" + data[i].gender + "</td>"; tbody.appendChild(row); } // 点击行获取数据 tbody.addEventListener("click", function(event) { var row = event.target.parentNode; var name = row.cells[0].innerText; var age = row.cells[1].innerText; var gender = row.cells[2].innerText; console.log("姓名：" + name + "，年龄：" + age + "，性别：" + gender); }); ``` 以上代码会根据 `data` 数组中的数据动态生成表格，并在用户点击每一行时获取该行的数据。在这个示例中，我们使用了事件委托来监听整个 `tbody` 元素的点击事件，然后根据点击事件获取对应的行和单元格数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

雪狼之夜

打个赏，让博主知道博文没白写

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

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

打赏作者

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

抵扣说明：

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

余额充值