<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 事件代理 </title>
</head>
<script type="text/html" id="enment">
<li> {{num}} <button>按钮</button> </li>
</script>
<body>
<p>动态创建50li的办法</p>
</body>
<script>
// 操作DOM创建以及使用 文档碎片 减少页面重绘
console.time()
var box = document.createDocumentFragment(); // 文档碎片
var ul = document.createElement('ul'),
list = [];
for (let i = 0; i < 50; i++) {
var li = document.createElement('li');
li.innerHTML = `${i} <Button> 我是第 ${i} </Button>`
list.push(li)
box.appendChild(li)
}
document.body.onclick = function(e){ // e为事件源
console.log(e === window.event); // 如果回调没有事件源 ,那window上面的event就是当前的事件源
console.log(e.target === window.event.srcElement); // 如果没有事件源对象 同样 window.event上面会有当前的事件源对象
e.target.parentNode.remove()
}
document.body.append(box)
console.timeEnd()
</script>
<script>
//字符串创建 渲染最快性能最低
console.time()
var list = '';
for (let i = 0; i < 50; i++) {
list += `<li>${i} <Button> 我是第 ${i} </Button></li>`;
}
var ul = document.createElement('ul').innerHTML = list;
document.body.innerHTML=(ul);
document.body.onclick = function(e){ // e为事件源
console.log(e === window.event); // 如果回调没有事件源 ,那window上面的event就是当前的事件源
console.log(e.target === window.event.srcElement); // 如果没有事件源对象 同样 window.event上面会有当前的事件源对象
e.target.parentNode.remove()
}
console.timeEnd()
</script>
<script>
// 使用模板方式创建 性能优于DOM创建
console.time()
var ul = document.createElement('ul')
men = document.getElementById('enment').innerHTML
list = '';
for (let i = 0; i < 50; i++) {
list += men.replace(/{{(.*?)}}/,i);
}
ul.innerHTML = list;
document.body.append(ul);
document.body.onclick = function(e){ // e为事件源
console.log(e === window.event); // 如果回调没有事件源 ,那window上面的event就是当前的事件源
console.log(e.target === window.event.srcElement); // 如果没有事件源对象 同样 window.event上面会有当前的事件源对象
e.target.parentNode.remove()
}
console.timeEnd()
</script>
</html>
原生JS批量创建DOM性能对比,以及事件代理绑定绑定事件
最新推荐文章于 2022-12-05 18:23:54 发布