最近在看网上的前端笔试题,借鉴别人的自己来试一下:
题目:
写一段脚本,实现:当页面上任意一个链接被点击的时候,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的冒泡监听机制为我们提供了这个便利。