js循环添加事件的两种方法

js循环添加事件的两种方法

选择下拉列表中的一个li将文本传到框中
问题：写此二级菜单时用到的方法不好，对此进行优化
原始js代码：

<script>
		// 思路：1.点击下拉框a时，ul中的display：none变为display：block
		// 点击其中一个将li中的数据传到span框中
		var a=document.querySelector('a');
		select.onclick=function(){
			sub.style.display='block';
			// li点击触发
			var li=document.querySelectorAll('li');
				li[0].onclick=function(){
					// 创建一个新节点并把li1的内容读取出来
					var newNode1=document.createTextNode(li[0].innerText);
					// 替换原来的内容
					select.replaceChild(newNode1,select.firstChild);
				}
				li[1].onclick=function(){
					// 创建一个新节点并把li1的内容读取出来
					var newNode1=document.createTextNode(li[1].innerText);
					// 替换原来的内容
					select.replaceChild(newNode1,select.firstChild);
				}
				li[2].onclick=function(){
					// 创建一个新节点并把li1的内容读取出来
					var newNode1=document.createTextNode(li[2].innerText);
					// 替换原来的内容
					select.replaceChild(newNode1,select.firstChild);
				}
				li[3].onclick=function(){
					// 创建一个新节点并把li1的内容读取出来
					var newNode1=document.createTextNode(li[3].innerText);
					// 替换原来的内容
					select.replaceChild(newNode1,select.firstChild);
				}
				li[4].onclick=function(){
					// 创建一个新节点并把li1的内容读取出来
					var newNode1=document.createTextNode(li[4].innerText);
					// 替换原来的内容
					select.replaceChild(newNode1,select.firstChild);
				}
				li[5].onclick=function(){
					// 创建一个新节点并把li1的内容读取出来
					var newNode1=document.createTextNode(li[5].innerText);
					// 替换原来的内容
					select.replaceChild(newNode1,select.firstChild);
				} 
			}
	</script>

1.forEach添加法

语法

语法：arr.forEach(function (item, index, arr) {})
item：就是数组中的每一项
index：就是数组的索引
arr：就是原始数组

优化

采用forEach遍历数组优化后的代码：

<script>
		// 思路：1.点击下拉框a时，ul中的display：none变为display：block
		// 点击其中一个将li中的数据传到span框中
		var a=document.querySelector('a');
		select.onclick=function(){
			sub.style.display='block';
			// li点击触发
			var li=document.querySelectorAll('li');
			// 1.方法一，用forEach的方法得到下标
			// forEach()的用法，item是数组中的每一项，index是返回在的这个项的下标
			li.forEach(function(item,index){
				li[index].onclick=function(){
					// 创建一个新节点并把li1的内容读取出来
					var newNode1=document.createTextNode(li[index].innerText);
					// 替换原来的内容
					select.replaceChild(newNode1,select.firstChild);
				}
			})
			}
	</script>

2.获取事件源拿到点击的元素

e.target获取目标节点

<script>
		// 思路：1.点击下拉框a时，ul中的display：none变为display：block
		// 点击其中一个将li中的数据传到span框中
		var a=document.querySelector('a');
		select.onclick=function(){
			sub.style.display='block';
			// li点击触发
			var li=document.querySelectorAll('li');
			// 2.方法二
			for(var i=0;i<li.length;i++){
				li[i].onclick=function(e){
					// 创建一个新节点并把li1的内容读取出来
					// 得到目标节点的文本内容，此目标节点返回的是<li>大话西游II</li>,
					var newNode1=document.createTextNode(e.target.innerText);
					// 替换原来的内容
					select.replaceChild(newNode1,select.firstChild);
				}
			}
		}
	</script>