现有以下HTML, 请监听item的点击事件,并满足以下要求:
- 使用alert显示item的内容
- 动态添加新的item依旧有效
- itemx的click事件不能被触发
<div id="container">
<div id="itemx" class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
解题
const dom = document.getElementById('container'),
list = dom.getElementsByClassName('item'),
btn = document.getElementById('btn');
dom.onclick = function (e) {
const { id, innerHTML, className } = e.target;
if (!id && className === 'item') {
alert(innerHTML);
}
};
btn.onclick = function () {
let html = document.createElement('div'),
len = list.length;
html.className = 'item';
html.innerHTML = parseInt(list[len - 1].innerHTML) + 1;
dom.appendChild(html);
};