例子：
<body>
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button id="addli">添加</button>
<script>
var lists=document.querySelector('#list');
var lis=document.querySelectorAll('li');//li列表类数组
var addlis=document.querySelector('#addli');
for(var i=0;i<lis.length;i++){
lis[i].addEventListener('click',function(e){
console.log(e.target.innerText)
});
}
addlis.addEventListener('click',function(){
var addli=document.createElement('li');
addli.innerText='添加的li';
lists.appendChild(addli);
})
</script>
</body>
图片.png
为了使点击li时不管是原来的还是新增的li都有绑定事件（控制台输出内容）
方法一：
<body>
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button id="addli">添加</button>
<script>
var lists=document.querySelector('#list');
var lis=document.querySelectorAll('li');//li列表类数组
var addlis=document.querySelector('#addli');
for(var i=0;i<lis.length;i++){
lis[i].addEventListener('click',function(e){
console.log(e.target.innerText)
});
}
addlis.addEventListener('click',function(){
var addli=document.createElement('li');
addli.innerText='添加的li';
addli.addEventListener('click',function(e){
console.log(e.target.innerText)
});
lists.appendChild(addli);
})
</script>
</body>
图片.png
这个方法是一般的事件绑定方法，缺点是代码臃肿，如果有n种事件绑定，新添加的元素后，就需要重新写n种事件绑定，总共有2n个事件，这会造成代码臃肿，同样的功能需要再编码一次
怎么办呢？
方法二把事件绑定在父容器上，事件冒泡的应用-事件代理，完美的减少了一半的函数
<body>
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button id="addli">添加</button>
<script>
var lists=document.querySelector('#list');
var lis=document.querySelectorAll('li');//li列表类数组
var addlis=document.querySelector('#addli');
lists.addEventListener('click',function(e){
console.log(e.target.innerText)
});
addlis.addEventListener('click',function(){
var addli=document.createElement('li');
addli.innerText='添加的li';
lists.appendChild(addli);
})
</script>
</body>
图片.png
