前端面试（一）

一、事件传播流程

js事件传播流程主要分为三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

二、Ajax轮询——"定时的通过Ajax访问服务端"。

轮询：客户端按规定时间定时向服务端发送ajax请求，服务器接到请求后马上返回响应信息并关闭连接。

window.setInterval(function(){$.ajax(getting)},1000);

三、元素水平垂直居中

方法一     绝对定位+margin:auto

div{
       width: 200px;
       height: 200px;
       position:absolute;
       left:0;
       top: 0;
       bottom: 0;
       right: 0;
       margin: auto;
   }

方法二     绝对定位+负margin

div{
        width:200px;
        height: 200px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

方法三     绝对定位+transform

 div{
        width: 200px;
        height: 200px;
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

方法四     flex布局

.box{
         height:600px;  
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
    }

.box>div{  //不限宽高水平垂直居中
        width: 200px;
        height: 200px;
}

方法五     table-cell

display:table-cell;
text-align:center;
vertical-align: middle;

四、页面局部刷新

可以使用Ajax实现页面局部刷新

Ajax是一种可以在浏览器和服务器之间使用异步数据传输（HTTP请求）的技术。使用它可以让页面请求少量的数据，而不用刷新整个页面。而传统的页面（不使用Ajax）要刷新部分内容，必须重载整个网页页面。

五、innerHtml与innerText

innerHTML用来设置或获取成对标签之间的HTML内容，包括其中内嵌的子元素标签。

innerText也用来设置或获取成对标签之间的HTML内容，但它只关注文本信息，会省略内嵌的标签名。

六、ajax浏览器兼容性

AJAX高度依赖JavaScript，而不同的浏览器对JavaScript支持性不同。这成了一个问题，尤其是当AJAX必须跨多个浏览器工作的时候，那些不支持JavaScript某些选项的浏览器将不能够正常使用ajax。

解决方法：使用jquery
jQuery的Ajax很好的封装了原生Ajax的代码，在兼容性和易用性方面都做了很大的提高，让Ajax的调用变得非常简单。

七、盒模型

盒模型：标准盒模型（w3c盒模型）、怪异盒模型（IE盒模型）

• 设置
  标准模型：box-sizing:content-box
  怪异模型：box-sizing:boder-box
• 计算方式
  标准模型：盒子width/height=margin+padding+border+content
  怪异模型：盒子width/height=content（包括边框和内边距）+margin

八、原生js绑定事件的三种方式

1、直接在DOM中绑定事件 ----只会执行第一个绑定事件

<div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 

<script>
　　　function clickone(){ alert("hello"); } //执行
　　　function clicktwo(){ alert("world!"); }
</script>

2、在脚本通过匿名函数的方式绑定---只会执行最后一个绑定事件

<div id="btn"></div>

<script>
　document.getElementById("btn").onclick = function（）{ alert("hello"); }
　document.getElementById("btn").onclick = function（）{ alert("world"); } //执行
</script>

3、使用addeventlistener" 多次绑定同一个事件---按照顺序执行绑定事件

<div id="btn"></div>

<script>
　　document.getElementById("btn").addeventlistener("click",clickone,false);
　　function clickone(){ alert("hello"); } //先执行
　　document.getElementById("btn").addeventlistener("click",clicktwo,false);
　　function clicktwo(){ alert("world"); } //后执行
</script>