21届秋招前端面经 --支付宝

事件委托的原理

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

好处：

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，提高性能； 使用场景

给 ul 的1000个li注册点击事件，普通做法是循环给每个li添加，

事件委托利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Do something</li> <li id="sayHi">Say hi</li> </ul> var item1 = document.getElementById("goSomewhere"); var item2 = document.getElementById("doSomething"); var item3 = document.getElementById("sayHi"); document.addEventListener("click", function (event) { var target = event.target; switch (target.id) { case "doSomething": document.title = "事件委托"; break; case "goSomewhere": location.href = "http://www.baidu.com"; break; case "sayHi": alert("hi"); break; } })

Transform

值含义skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。translate(x,y)定义 2D 转换。（可单独使用xy）scale(x,y)定义 2D 缩放转换。（可单独使用xy）rotate(angle)定义 2D 旋转，在参数中规定角度。perspective(n)为 3D 转换元素定义透视视图。

CSS选择器优先级

（!important）> id选择器> class选择器（属性选择器/伪类选择器）> 标签选择器（伪元素选择器） 同类选择符条件下层级越多的优先级越高。 优先级就近原则，同权重情况下样式定义最近者为准。载入样式以最后载入的定位为准。

权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器计算权重公式继承或者 *（通配符选择器）0,0,0,0每个元素（标签选择器）p等0,0,0,1每个类，伪类 .0,0,1,0每个ID #0,1,0,0每个行内样式 style=""1,0,0,0每个!important 重要的∞ 无穷大

继承的权重是0

透明色设置

1）background:rgba(0,0,0,0.3)

2）opacity属性参数的＂不透明度＂是以数字表示，从 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，换句话说，数字越大代表元素越不透明。不过浏览器支援度较差，不建议使用。

隐藏display、visibility、overflow

属性区别用途display隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛visibility隐藏对象，保留位置使用较少overflow只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

visibility性能比display好，因为display：none隐藏元素时，页面会发生回流。

盒子垂直水平居中

1）position定位（宽度高度已知）：

.parent { position: relative; height: 50px; wight:50px; } .child { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; }

2）position + transform(有无宽高都试用)：

.parent{ position: relative; height: 200px; background-color: black; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rebeccapurple; }

3）flex布局：

.parent { display: flex; justify-content: center; align-items: center; }