请用两段完整的代码说明js 中普通事件绑定和事件代理的区别并说明事件代理相对于事件绑定的优势
1个回答
展开全部
普通
<!DOCTYPE html>
<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>
委拖
<!DOCTYPE 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>
优势
如果有大量动态生成的元素，普通的绑定方式会有很多不便，委托的方式有更好的性能和灵活性。
<!DOCTYPE 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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
