鼠標點擊頁面中的任意標籤，alert該標籤的名稱
方法一 :
在這裏我們可以利用冒泡解決該問題
document.onclick = function(e){
var e=(e||event);
var o=e["target"]||e["srcElement"];
alert(o.tagName.toLowerCase());
}方法二：
進行遍歷
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍歷所有標籤進行添加click事件</title>
</head>
<body>
<div class="alert">div</div>
<a href="javascript:;" class='alert'>a</a>
<b class="hel">b</b>
<script>
function getTagName(){
return document.getElementsByTagName("*");
}
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
window.onload=function(){
var tagObj=getTagName();
console.log("nihaofdfdfdfdfdfdf");
for(var i=0,max=tagObj.length;i<max;i++){
tagObj[i].onclick=function(e){
stopPropagation(e);
alert(this.tagName);
}
}
}
</script>
</body>
</html>js實現點擊
<html>
<head>
<style>
li{
width:50px;
height:30px;
margin:5px;
float:left;
text-align: center;
line-height: 30px;
border-radius:4px;
list-style-type: none;
background: red;
cursor:pointer;
}
</style>
<script>
window.onload=function(){
//此處有三種方法
};
</script>
<head>
<body>
<div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</div>
</body>
</html> 第一種：
var oli=document.getElementsByTagName('li');
for(var i=0; i<oli.length;i++)
{
oli[i].index=i;
oli[i].onclick=function(){
alert('你點擊的列表的下標是：'+this.index);//列表下標從0開始
};
} 除此之外還有別的方法：
1）通過閉包的方法
var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
oli[i].onclick=(function(n){
return function(){
alert(n);
}
})(i)
} 或者：
2）
var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
(function(n){
oli[i].onclick=function(){
alert(n);
}
})(i)
} 或者
3）
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
function foo() {
for (var i = 0; i < li.length; i++) {
li[i].onclick = (function (i) {
return function(){
alert(i);
}
})(i);
}
}
foo();或者
4）使用ES6中的新特性let來聲明變量
用let來聲明的變量將具有塊級作用域，很明顯可以達到要求，不過需要注意的是得加個’use strict’（使用嚴格模式）纔會生效
function foo() {'use strict'
for (let i = 0; i < li.length; i++) {
li[i].onclick = function(){
alert(i);
}
}
}
foo();或者
5）事件委託
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
ul.addEventListener('click',function(ev){
var ev = ev||window.event;
var target = ev.target||ev.srcElement;
for( var i=0;i<li.length;i++){
if( li[i] == target){
alert(i);
}
}