企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
元素批量添加事件: 概述:在一些特定的场景下,有很多相同节点(标签)需要添加相同的相同的事件,就可以批量添加事件。 ``` +function(vsss){ sv[vsss].onclick=function(){ sv[vsss].style.color="red"; } ``` 闭包事件 函数上下文 this 概述:在函数的函数体中是有函数上下文this概念。 (当用户触发了元素事件的时候,函数上下文即为触发这个事件的元素。 ``` <script type="text/javascript"> var sv=document.getElementsByTagName("li"); for(var i=0;i<sv.length;i++){ sv[i].onclick=function(){ this.style.color="red"; } } </script> ``` ## 代码案例: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{ width: 100%; height: 30px; background-color: bisque; display: block; } ul li{ float:left; display: block; margin-left: 25px; line-height:30px; } </style> </head> <body> <ul> <li>首页</li> <li>新闻</li> <li>军事</li> <li>知识</li> <li>好玩</li> </ul> </body> </html> <script type="text/javascript"> var sv=document.getElementsByTagName("li"); for(var i=0;i<sv.length;i++){ +function(vsss){ sv[vsss].onclick=function(){ sv[vsss].style.color="red"; } }(i); } </script> <script type="text/javascript"> var sv=document.getElementsByTagName("li"); for(var i=0;i<sv.length;i++){ sv[i].onclick=function(){ this.style.color="red"; } } </script> ```