前端面试题（基础篇六）

一、什么是事件代理

事件代理（Event Delegation ），又称事件委托。是JavaScript中常用的绑定事件的技巧。顾名思义，事件代理就是将原本要绑定的事件委托给父元素，让父元素担当事件监听的职务。原理就是DOM元素的事件冒泡机制

使用事件代理的好处就是可以提高性能、节省内存，例如table中代理所有对td的click事件，将原本需要绑定的n个事件减少为1个

事件代理可以让新增的子元素也绑定事件

二、事件模型

W3C 中定义事件的发⽣经历三个阶段：捕获阶段（ capturing ）、⽬标阶段（ targetin ）、冒泡阶段（ bubbling ）

冒泡型事件：当你使⽤事件冒泡时，⼦级元素先触发，⽗级元素后触发

捕获型事件：当你使⽤事件捕获时，⽗级元素先触发，⼦级元素后触发

DOM 事件流：同时⽀持两种事件模型：捕获型事件和冒泡型事件

阻⽌冒泡：在 W3c 中，使⽤ stopPropagation() ⽅法；在IE下设置 cancelBubble = true

阻⽌捕获：阻⽌事件的默认⾏为，例如 click - <a> 后的跳转。在 W3c 中，使⽤ preventDefault() ⽅法，在 IE 下设置window.event.returnValue= false

三、new操作符具体⼲了什么呢?

在内存中（堆）创建⼀个空对象，并且 this 变量引⽤该对象，同时还继承了该函数的原型

属性和⽅法被加⼊到 this 引⽤的对象中

新创建的对象由 this 所引⽤，并且最后隐式的返回 this

四、Ajax原理

Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascript来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服务器获得请求数据

Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是 Ajax的核⼼机制

/** 1. 创建连接 **/
var xhr = null;
xhr = new XMLHttpRequest()
/** 2. 连接服务器 **/
xhr.open('get', url, true)
/** 3. 发送请求 **/
xhr.send(null);
/** 4. 接受请求 **/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else {
/** false **/
fail && fail(xhr.status);
}
}
}