使用js动态添加点击事件时，click与onclick的区别

最新推荐文章于 2024-07-14 03:40:57 发布
最新推荐文章于 2024-07-14 03:40:57 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： js

转载自：http://blog.csdn.net/xyq286654901/article/details/72687052

今天在做项目的时候遇到了一个问题，就是通过js动态绑定事件的问题。在网上收索了下，然后自己写了一个个很简单的DOM实验了一下！

1、jsp代码

  1. <body>  
  2.   
  3. <p>定义第一个添加按钮</p>  
  4.   
  5. <input type="button" value="第一个按钮" id="oneAdd"/>  
  6. </br>  
  7. </br>  
  8. </br>  
  9. <p>定义一个DIV</p>  
  10. <div style="width: 400px;height: 150px;border:1px solid #000;" id="div">  
  11. </div>  
  12. </body>  

2、js代码

  1. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>  
  2.   
  3. <script type="text/javascript">  
  4.   
  5. $(function(){  
  6.   
  7. //给添加按钮，首先使用click的方式  
  8.   
  9. $("#oneAdd").click(function(){  
  10.   
  11. //在div里面添加第二个按钮  
  12.   
  13. console.log("点击了第一个按钮")  
  14.   
  15. $("#div").html("<input type='button' value='第二个按钮' id='twoAdd' />");  
  16.   
  17. })  
  18.   
  19.   
  20. //给第二个按钮一个添加事件，同样是使用click的方式  
  21.   
  22. //第一个方法  
  23.   
  24. /*$("#twoAdd").click(function(){ 
  25.  
  26. console.log("点击了第二个按钮") 
  27.  
  28. }) 
  29.  
  30.  
  31. //第二个方法 
  32.  
  33. $("#twoAdd").on("click",function(){ 
  34.  
  35. console.log("点击了第二个按钮") 
  36.  
  37. })*/  
  38.   
  39.   
  40. //第三个方法  
  41.   
  42. $("#div").on("click","#twoAdd",function(){  
  43.   
  44. console.log($(this).attr("type"))  
  45.   
  46. //取消按钮一的点击事件  
  47.   
  48. $("#oneAdd").off("click");  
  49.   
  50. })  
  51.   
  52. })  
  53.   
  54. </script>  
3、结果
点击第一个按钮可以正常触发cilck事件，
当启用方法一时，按钮无法正常触发click事件
当启用方法二时，按钮无法正常触发click事件
当启用方法三时，按钮可以正常触发click事件
4、总结
1、在页面初始化的时候已经给定固定的id时，cilck和onclick都可以正常使用；
2、当页面动态加载一个id时，使用click将失去作用，必须使用onclick才可以正常运行；
3、element.click()这种写法不支持给动态元素或样式绑定事件。支持给动态元素绑定事件的是.live()和.on()。live在jQquery1.7后就不推荐使用了。使用.on()时注意，on前面的元素必须在页面初始化的时候就存在静态页里面，这也是为什么方法而不能正常使用的原因。
另一种解释是： 在DOM加载的工程中 当加载到 按钮二的点击事件那里时 DOM中是找不到 twoAdd 这个节点的 所以你的第一个方法和第二个方法都是无效的 第三种方法是采用了事件委托的处理方式 DOM加载时先去找 id 为 div的这节点 当点击这个节点时 再去它下面找 twoAdd 这个节点
fruggy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态添加onclick事件可传参数与不传参数
01-19
1）当方法没有参数时，赋值可以直接用onclick = 方法名 [removed] = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2）当方法有参数时，用onclick = 方法名(参数)时就有错...
JavaScript中按钮点击事件的几种实现方式
jsjxyinghan的博客
05-26 1万+
对于方法二，一定要把script代码块写在body的尾部，但是如果说硬是要写在head标签内的话，一定要在window.load里面，或者在jq的另一种写法$(document).ready()。这个是代码执行顺序的原因。btn.addEventListener('click',function() {alert('你点击了按钮哦！')},false);alert("你点击了按钮哦！alert("你点击了按钮哦");alert("你点击了按钮哦！
JS-事件
hello world
06-01 5715
/事件源 box //on事件类型 onclik //事件的处理程序是 通过函数赋值;IE浏览器中 可以通过e.cancelBubble = true 进行阻止事件的冒泡 //取消冒泡。网页中的每个元素都可以产生某些可以触发JavaScript的事件.事件冒泡：当点击时 事件从最精确的元素 一层一层往上触发 直到最顶层元素 这个过程叫做事件冒泡。[ add 添加] [Event 事件 ] [listner 监听,听众]console.log('代码会在box被点击后执行');
jquery添加点击事件的几种方式
最新发布
weixin_27130513的博客
07-14 470
jQuery添加点击事件的几种方式 在前端开发中，经常需要给页面元素添加点击事件，以实现交互功能。jQuery是一个广泛应用的JavaScript库，提供了许多简洁方便的方法来处理DOM操作，其中包括添加点击事件。本文将介绍几种jQuery添加点击事件的方式，并附上相应的代码示例。 1. 通过click()方法添加点击事件...
JavaScript中的点击事件
热门推荐
weixin_44558721的博客
10-24 3万+
JavaScript中的基础知识
js动态添加点击事件的两种方法
h0713的博客
07-25 2万+
js动态添加点击事件或其他事件（这里以点击事件为例） 第一种：加载 js文件时自动添加，这种方法可以免去html元素内的onclick等属性一长串的字符，也方便一些像我这样初级的查看源代码时找不着北； 但缺点是只能在页面启动时加载一次（不知道这样表述准不准确，反正我能懂就好了），想要灵活的添加移除还不方便，案例代码如下： var redmove=document.getElementById("rolemove"); redmove.addEventListener('click',function(){…
js点击事件多种写法
m0_64494670的博客
10-04 3397
js点击事件多种写法
js动态添加的DIV中的onclick事件简单实例
10-21
下面是使用原生JavaScript为动态添加的`input`元素绑定`onclick`事件的示例： ```javascript 我是button" id="bu"> <script type="text/javascript"> var bObj = document.getElementById("bu"); bObj.onclick = ...
vue动态渲染svg、添加点击事件的实现
10-15
- Vue不推荐直接使用原生的`addEventListener`或`onclick`属性来为动态生成的元素添加事件监听器，因为这样做会绕过Vue的事件机制，导致事件监听器不会自动绑定到Vue实例上。 - 另一个需要注意的地方是，不能直接...
js点击事件
qx020814的博客
07-20 5984
可以将事件绑定在按钮上，点击就触发。将方法中的点击属性重新付给它自己。悬浮在图片上停止，离开图片继续。
javascript 与jquery为每个p标签增加onclick方法
iteye_343的博客
04-30 318
&lt;script type="text/javascript"&gt; window.onload=function(){ var items=document.getElementsByTagName("p"); for(var i=0;i&lt;items.length;i++){ items[i].onclick=function(){ al...
js 点击事件
qq_42718130的博客
04-08 1万+
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js中的点击事件（click）的实现方式</title> </head> <body> <!-- 第三种方式--> <button id="btn0" onclick="threeFn()">点我</button.
Javascript 常用on事件
YSKBO743639220的博客
04-25 2190
onclick 鼠标点击事件 ondblclick 鼠标双击事件 onmousedown 鼠标上的按钮被按下了 onmouseup鼠标按下后，松开时激发的事件 onmouseover 当鼠标移动到某对象范围的上方时触发的事件 onmousemove 鼠标移动时触发的事件 onmouseout 当鼠标离开某对象范围时触发的事件 onkeypress当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onkeydown当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象
前端js中的onclick点击事件
个人笔记
03-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 50px; background-color: skyblue; margin: 40px; } </style>
js设置点击onclick事件之信息录入系统实现表格添加、修改、保存、删除内容
qq_53787962的博客
09-13 3707
第一步：1.创建姓名、学号、年龄、性别、学历等信息。 2.创建一个表格。3.创建添加按钮，把信息添加至表格中。第二步：1.获取button、input、table等元素节点。 2.给按钮设置点击事件。 3.点击触发创建一行、删除、修改按钮，创建单元格获取输入内容并添加至表格。第三步：1.给删除、修改按钮设置点击事件。2.点击删除所添加至表格的信息。3.点击修改所添加至表格的信息并保存。
js点击事件几种方法
weixin_40030173的博客
06-02 2万+
1、通过方法响应点击事件 <div onclick="fn()" id="demo">点击</div> function fn(){ alert(111) } 2、点击事件 <div id="demo">点击</div> var aDiv=document.getElementById("demo") aDiv.onclick=function(){ alert(111) } 3、监听点击事件 <div id="demo">点击<
js 动态生成div并添加点击事件
qq_40216244的博客
05-20 1万+
/* 动态生成div */ function creatDiv(){ $.ajax({ type: "POST", url: "GetGis.action", success: function(msg){ var obj = eval("(" + msg + ")"); for(var i=0;i<obj.length;i++){ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值