原生js 给动态添加的元素添加(事件监听器)

原生js (事件监听)和(动态添加元素)

给动态添加的元素添加点击事件
原生js 给动态添加的元素添加(事件监听器)_第1张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>原生js事件监听</title>
		<style>
			ul{
				list-style: none;
				padding: 0;
				margin:0;
			}
			.list{
				margin-top:20px;
				width:300px;
				border:1px solid #eee;
			}
			.list li{
				line-height:35px;
				border-bottom: 1px solid #eee;
			}
			.list li:hover{
				background:#eee;
			}
			.list li:active{
				background:#ccc;
			}
		</style>
	</head>
	<body>
		原生js事件监听 监听动态添加的元素
		<div>
			<button onclick="addSubMenu()" id="btn">添加</button>
		</div>
		<ul id="menu" class="list">
			<li data-id="1">1点击事件</li>
			<li data-id="2">2点击事件</li>
			<li data-id="3">3点击事件</li>
		</ul>
	</body>
</html>
<script>
var menu = document.getElementById('menu');
//监听li点击事件
menu.addEventListener('click', function (ev) {
	var target = ev.target || ev.srcElement;
	if (target.nodeName.toLowerCase() == 'li') {
		alert(target.innerHTML);
		console.log(target);
	}
});
function addSubMenu(){
	var i = menu.children.length +1;
	
	var li = document.createElement("li");  //创建元素节点
    var txt = document.createTextNode(i+"点击事件"); //创建文本节点
    li.appendChild(txt); //把创建的文本节点追加到元素节点中
    var attrs = document.createAttribute("data-id"); //创建属性节点
    attrs.value= i; //给属性节点设置值
    li.setAttributeNode(attrs); //给元素设置属性节点
    menu.appendChild(li);  //把创建的li元素追加到menu最后
}
</script>

你可能感兴趣的:(原生js 给动态添加的元素添加(事件监听器))