为动态创建的dom元素绑定事件
直接上代码吧,也很简单。
<!DOCTYPE html>
<html>
<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>使用原生js为动态创建的元素绑定事件</title>
</head>
<body>
<button onclick="add(this)">创建动态元素</button>
<ul id="ul"></ul>
<script>
function add(e) {
let ul = document.getElementById("ul");
for(let i = 0; i < 10; i++) {
let li = document.createElement("li");
li.innerHTML = "list" + i;
ul.appendChild(li)
}
e.innerHTML = "点击list中的文本改变样式";
}
let ul = document.getElementById("ul");
ul.addEventListener('click', function(e) {
let _this = e.target;
let dom = e.target.tagName.toLowerCase();
if(dom === 'li') {
_this.style.color = 'red';
}
})
</script>
</body>
</html>