请用两段完整的代码说明js 中普通事件绑定和事件代理的区别并说明事件代...
发布网友
发布时间：2022-05-21 08:09
共1个回答
热心网友
时间：2022-06-13 02:51
普通
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="btn" value="点击">
</body>
<script>
document.getElementById('btn').onclick = function () {
alert(this.value)
}
</script>
</html>
委拖
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="btn" value="点击">
</body>
<script>
document.body.onclick = function (e) {
if(e.target.id == 'btn') alert(e.target.value);
}
</script>
</html>
优势
如果有大量动态生成的元素，普通的绑定方式会有很多不便，委托的方式有更好的性能和灵活性。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="new" value="新建">
</body>
<script>
var i = 0;
document.getElementById('new').onclick = function () {
var node = document.createElement('BUTTON');
var text = document.createTextNode('委托-'+ i);
var attr_id = document.createAttribute('id');
attr_id.value = 'i_'+i;
node.setAttributeNode(attr_id);
node.appendChild(text);
document.body.appendChild(node);
i++;
}
document.body.onclick = function (e) {
if(e.target.tagName == 'BUTTON')
alert('id = ' + e.target.id);
}
</script>
</html>
