JS（二）

1.说说前端中的事件流

HTML中与JavaScript交互是通过事件驱动来实现的，例如鼠标点击事件onclick等，可以想问档或者文档中的元素添加事件侦听器来预定事件。事件流描述的是从页面接收中接收事件的顺序，DOM2级事件流包括下面几个阶段：事件捕获阶段，处于目标阶段，件冒泡阶段。

addEventListener:是DOM2级事件新增的指定事件处理程序的操作，这个方法接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值为true，表示在捕获阶段处理事件程序；如果为false表示在冒泡阶段调用事件处理程序。

 

2.如何让事件先冒泡后捕获

在DOM标准事件模型中，是先捕获后冒泡，但如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓处理，知道冒泡事件捕获后在执行捕获事件。

 

3.说一下事件委托

事件委托指的是不在事件发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡父元素可以监听到子元素上事件的触发通过判断时间发生元素DOM的类型来做出不同的响应。

好处：比较适合动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制，比如ul和li，在ul上设置监听函数动态新增的li也可以有事件触发机制。

 

4.说一下图片的懒加载和预加载

预加载：提前加载图片，当用户需要查看时可以直接从本地缓存中渲染。

懒加载：懒加载的主要目的时作为服务器前端的优化，减少请求数或延迟请求数。

两种技术的本质：两只行为时相反的，一个是提前加载，一个时迟缓甚至是不加载。懒加载对服务器前端有一定的缓解压力的作用，预加载则会增加服务器前端压力。

预加载：应用广告弹窗；懒加载：电商图片较多的。

 

5.Mouseover和mouseenter的区别

Mouseover：当鼠标移入元素或其子元素时都会触发事件，所以有一个重复触发冒泡的过程，对应的移除事件是mouseout。

Mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave。

 

1. Js的new操作符做了那些事情

New操作符新建了一个空对象，这个对象的原型指向构造函数的prototype，执行构造函数后返回这个对象。