输出子目录下标的索引

「已注销」

于 2019-01-11 15:51:59 发布

阅读量169

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq_36276469/article/details/86304006

版权

JS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML与JavaScript结合使用的基础知识，展示了如何通过JavaScript获取DOM元素并为这些元素添加事件监听器。通过实例，解释了四种不同的方法来实现点击事件的处理，包括直接设置属性、使用匿名函数、闭包和事件委托，为读者提供了深入理解网页交互机制的机会。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		li{
			background: #808080;
		}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script type="text/javascript">
		var li=document.getElementsByTagName("li");
		var ul = document.getElementsByTagName("ul");
		for (var i=0;i<li.length;i++) {
//			//第一种方法
//			li[i].index=i;//自定义索引
//			li[i].addEventListener("click",function(){
//				var index=this.index;
//				console.log(index);
//			},false)
//			
//			//第二种方法
//			li[i].addEventListener("click",function(a){
//				console.log(a.target);
//			},false)
//
//			//第三种方法
//			(function(j){
//				li[j].onclick=function(){
//				console.log(j);
//				}
//			}(i))
//
			//第四种方法
//			(function (j){
//				li[j].addEventListener("click",function(){
//					console.log(j);
//				})
//			}(i))
		}
		
		// 利用事件处理函数实现   事件委托  
		 ul[0].addEventListener("click",function(e){
		 	e.target.style.background='red';
		 })
		
	</script>
</body>
</html>