【学习打卡】第四天 直面JavaScript中的30个疑难杂症

学习课程名称：直面JavaScript中的30个疑难杂症
章节名称：JS DOM
讲师姓名：公明2020

---

课程内容概述：

1. 带你深入理解DOM树加载过程
2. 三种事件绑定的异同
3. 带你深入理解事件触发，事件捕获与事件冒泡
4. 常用阻止默认行为的两种方式

---

DOM加载过程：

1.在浏览器中输入URL,交给DNS域名解析，找到IP，向服务器发送请求；（里面还有缓存，http协议，TCP等等）

2.服务器返回数据，浏览器接收文件（html,js,css,img…）,二进制文件。

3.构建css树，css解析器

4.构建render树，dom树+css树

5.布局layout与绘制point,计算对象之间的大小，确定每个节点在屏幕的确切坐标。

reflow（回流）：当元素属性发生改变且影响布局时（宽高、内外边距等），产生回流，相当于刷新页面

repaint（重绘）：当元素属性发生改变且不影响布局时（颜色、透明度等），产生重绘，相当于不刷新页面，动态更新内容。

重绘不一定引起回流，回流必将引起重绘

事件绑定分三种常用的方法:

1. 在DOM元素中直接绑定
2. 在js代码中绑定;
3. 绑定事件监听函数

理解事件触发，事件捕获与事件冒泡

1. 事件对象： 事件触发时自动创建的，封装了事件发生的元素和属性的信息。（存在event信息里面）

2. 事件周期：事件捕获、事件对象的触发，冒泡触发

3. 事件冒泡的应用：
   (1)阻止冒泡 e.stopPropagation(); IE: e.cancelBubble = true;
   (2)事件委托 ul>li 通过触发ul 元素进行判断对应子元素进行一些操作，就不用在li 上做过多的事件处理。

理解： 有多个元素包裹时，只点击内部元素的时候 ，首先事件捕获，先从外部开始 一层一层往下找，找到我们点击的元素进行事件的触发，然后通过冒泡原理传出去。

常用阻止默认行为的两种方式

1.event.stopPropagation();

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为(可执行超链接的跳转)

2.return false;

事件处理过程中，阻止了事件冒泡，也阻止了默认行为(不执行超链接的跳转)

还有一种有冒泡有关的：event.preventDefault();

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为(它只执行所有弹框，却没有执行超链接跳转)

---