JS——三种动态创建元素的区别！以及事件对象相关问题

一、三种动态创建元素的方法

1. document.write()
2. element.innerHTML
3. document.createElement()

二、三种动态创建元素方法的区别

1. document.write()    直接将内容写入页面的文档流，但是当文档流执行完毕后，它会导致页面重绘。比如在 js 代码中写入事件函数（鼠标点击事件）再添加内容时，之前所有的内容会被清空，页面的结构也会发生变化（从控制台可以看出），即页面重绘。
2. element.innerHTML   将内容写入某个DOM节点，不会导致页面重绘。在连续创建多个元素时，如果采用字符串拼接的方式，则执行效率低，采用 数组拼接方式，执行效率会大大提高，但是结构会稍微复杂。
3. document.createElement()   同样不会导致页面重绘，在连续创建多个元素时，执行效率比  element.innerHTML   的数组拼接方式稍低，但是它的结构更清晰。

三、事件流

DOM中把事件流分为三个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
   

     一般事件存在于捕获阶段或者冒泡阶段，这两种阶段都会在开发过程中造成一些不好的或者好的影响，在这里主要记录冒泡的不好影响以及解决方案。

四、事件委托

阻止事件冒泡的方法可以利用： event.stopPropagation()    方法，
但是当文档中许多子节点都要注册事件，文档就要刷新很多次，这显然就变得复杂。因此采用事件委托，事件委托的原理：不是给每个子节点注册事件，而是给他们的父节点注册事件（设置事件监听器），这样再利用冒泡原理的影响就可以设置子节点。
例如：

<ul>
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
</ul>

只给 ul 添加事件监听器，再利用 target 来找到当前点击了那个 li ,点击了 li 事件会冒泡到 ul 上，便触发事件。

这样只操作了一次 DOM ，大大提高了程序的性能 。