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

最新推荐文章于 2024-04-03 13:27:26 发布

谢小柒

最新推荐文章于 2024-04-03 13:27:26 发布

阅读量1.7w

点赞数 1

分类专栏：工作学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/xyq286654901/article/details/72687052

版权

工作学习笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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

1、jsp代码

  <body> 

  <p>定义第一个添加按钮</p> 

  <input type="button" value="第一个按钮" id="oneAdd"/> 

  </br> 

  </br> 

  </br> 

  <p>定义一个DIV</p> 

  <div style="width: 400px;height: 150px;border:1px solid #000;" id="div"> 

  </div> 

  </body> 

   2、js代码 
 
   <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> 
 
   <script type="text/javascript"> 
 
   $(function(){ 
 
   //给添加按钮，首先使用click的方式 
 
   $("#oneAdd").click(function(){ 
 
   //在div里面添加第二个按钮 
 
   console.log("点击了第一个按钮") 
 
   $("#div").html("<input type='button' value='第二个按钮' id='twoAdd' />"); 
 
   }) 
 
   //给第二个按钮一个添加事件，同样是使用click的方式 
 
   //第一个方法 
 
   /*$("#twoAdd").click(function(){ 
 
   console.log("点击了第二个按钮") 
 
   }) 
 
   //第二个方法 
 
   $("#twoAdd").on("click",function(){ 
 
   console.log("点击了第二个按钮") 
 
   })*/ 
 
   //第三个方法 
 
   $("#div").on("click","#twoAdd",function(){ 
 
   console.log($(this).attr("type")) 
 
  //取消按钮一的点击事件 
 
  $("#oneAdd").off("click"); 
 
   }) 
 
   }) 
 
   </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前面的元素必须在页面初始化的时候就存在静态页里面，这也是为什么方法而不能正常使用的原因。 
  
   5、参考 
 
   一、 
  http://blog.csdn.net/webzhuce/article/details/53981556 
 
   二、 
  http://blog.csdn.net/jalon2015/article/details/46535777