给动态添加的元素添加点击事件
<!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>
本资源由随笔博客发布。发布者：五维国度，转载请注明出处：http://blog.suibi.site/archives/4180
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 