javascript动态生成按钮并绑定点击事件

时间：2024-04-04 07:26:27

转载自:https://blog.csdn.net/u013692888/article/details/52750700

前一个多月公司的前端开发人员离职，公司一直在招前端，基本上每天都有几个来面试的人，就这个面试频率，也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础，但也很考基本功，基本上才3%左右的人做出来。当时我就在想以我的半吊子前端知识挑战一下这个题目。之前一直忙着把Android项目弄上线，修改bug，一直没时间。现在国庆节放假，发了一天时间把前端又看了下，然后理所当然的就写出来了，功能虽然完成了，但代码不怎么优雅。

         题目是说有一个html页面，页面有一个按钮，点击这个按钮，弹出一个框说自己是几号按钮，并询问是否生成新按钮。 点是生成一个新按钮，新按钮也能继续响应点击事件，生成新按钮。如图javascript动态生成按钮并绑定点击事件

点击弹框如图。javascript动态生成按钮并绑定点击事件

点确定，生成新按钮，点击新按钮能继续弹窗问是否生成新按钮。并报自己是几号按钮。

javascript动态生成按钮并绑定点击事件

分析下这道题发现难点在将生成的新按钮绑定点击事件，并能监听自己是几号按钮。解决办法是用js动态插入html代码，在插入的html代码中绑定点击事件。然后在点击事件中获取页面中所有按钮，为每一个按钮设置一个属性，用来标记自己是几号按钮。代码如下。其实也很简单的。如果有更简洁逼格更高的写法，欢迎讨论。

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>测试</title>  
  6. <head>  
  7. <body>  
  8. <input name="按钮" type="button" onClick="clic()" value="按钮"></input>  
  9. <div id="content"></div>  
  10. <script type="text/javascript">  
  11. clic();  
  12. function clic(){  
  13. var bs = document.getElementsByTagName("input");  
  14. for(var i=0;i<bs.length;i++){  
  15.     var b = bs[i];  
  16.     b.setAttribute("aaa",i);  
  17.     b.onclick = function(){  
  18.       var s = confirm("我是"+this.getAttribute("aaa")+"号按钮,是否生成新按钮");  
  19.       if(s){  
  20.           document.getElementById("content").innerHTML += "</br><input name=\"按钮\" type=\"button\" onClick=\"clic()\" value=\"按钮\"><\/input>";  
  21.           clic();  
  22.       }  
  23.     };  
  24. }  
  25. }  
  26. </script>  
  27. </body>  
  28. </html>   

小细节：1：在js代码里要手动掉一次clic方法。不然第一个按钮点两次才有反应。2：innerHtml里面对于“ " ”和“/”要进行转义。


相关文章