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

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

题目：

写一段脚本，实现：当页面上任意一个链接被点击的时候，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的冒泡监听机制为我们提供了这个便利。

转载于:https://www.cnblogs.com/skylar/p/3645637.html

一天一小段js代码（no.4）相关推荐

js图片转二进制流_V8是如何执行一段JS代码的？
汇编器编译器解释器解释执行和解释执行什么是V8? V8执行Js代码的过程汇编器编译器解释器众所周知,计算机只能理解机器语言,而我们平时编程用的通常是高级语言,所以源代码通常都要经过层层 ...
一小段jQuery代码的分析与优化
今天刚回家,QQ群里就看到有人求助优化一段jQuery代码,简单看了一下,发现如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用j ...
c# 如何在webbrowser控件执行一段JS代码
var doc = this.WebBrowser.Document.DomDocument as IHTMLDocument2; var win = doc.parentWindow as IHTM ...
js调用android代码怎么写,Android端使用WebView注入一段js代码实现js调用android
需求:为网页上个链接增加点击事件,但是这个链接无法增加js代码 url:http://public.rongcloud.cn/view/D4F444BE2D94D760329F3CF38B4AE35C ...
JavaScript 技术篇-一段js代码展示可以随鼠标移动变换样式的卡通人物，动态女生眼睛跟着鼠转动
把这段代码写在一个 html 文件里,然后用浏览器打开. <!DOCTYPE html> <html> <body><script src="htt ...
写一段js代码生成心形动画，动画路径内部填充渐变色
以下是一个用纯JS和HTML5 Canvas实现的生成心形动画的代码,路径内部填充渐变色: <canvas id="myCanvas"></canvas>& ...
这段js代码得拯救你多少时间
1.应用案例: var Mouse = function () {// Look! no that = this! this.position = [0, 0];if (document.addEve ...
一小段Python代码，破解加密zip文件的密码
今天的文章来自盏茶作酒同学.他在老电脑中发现了一个加密的 zip 文件,于是用 Python 破解了文件密码.在破解的过程中出现了内存爆炸的问题,通过阅读 Python 源代码找到了解决方案. 下 ...
JSON 列转行的一小段无用代码
json: 1 [{"iTagID":9,"cTag":"Liuxx测试-标签-1","cUnit":"TT& ...
java程序重新执行一遍_我怎么在jsp里只执行其中一小段java代码，而不把整个页面都重新加载一遍？...
嗯,比如说第一个里是省份,第二个是市,根据省份的选择变化来变化市名,从数据库里选,怎么实现? 用xmlhttp来实现查了一下还蛮难上手的,唯一的方法? 用iframe,我刚做完类似的项目,挺管用请 ...

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

一天一小段js代码（no.4）相关推荐

最新文章

热门文章