代码改变世界

一天一小段js代码（no.4）

  大额_skylar  阅读(365)  评论(0)  编辑  收藏  举报

最近在看网上的前端笔试题，借鉴别人的自己来试一下：

题目：

写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推。

 

有一点需要注意的是：在html中<a><area>标签中都有可能出现href

html中：

复制代码
<!DOCTYPE html>
<html lang="zh" >
 <head> 
        
        <title>demo</title>
        
        <style type="text/css">
              
     
        </style>
 </head>
 <body >
        <div class="box">
                <div class="item"><a href='#'>默认</a></div>
                <div class="item"><a href='#'>销量</a></div>
                <div class="item"><a href='#'>信用</a></div>
        </div>
        <script type='text/javascript' src='practice.js'></script>
 </body>
</html>
复制代码

 

 

js中：

 

复制代码
var body = document.getElementsByTagName('body')[0],
   links = document.getElementsByTagName('a'),
   len   = links.length;

var foo = function(el){
    var tagName = el.target.tagName.toLowerCase();
    if((tagName==='a'||tagName==='area')&&el.target.href){
        for(var i=0;i<len;i++){
            if(links[i]===el.target){
                alert(i+1);
            }
        }
    }
};

body.addEventListener('click',foo,false);
复制代码

 

    我所看到的文章的作者写的特别好，他说，最好将事件监听函数添加在父级元素上，这样在连接比较多的时候也能够性能比较好，毕竟js的冒泡监听机制为我们提供了这个便利。

 

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
SQL AI 助手