原生js （事件监听）和（动态添加元素）
给动态添加的元素添加点击事件
<!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>
