（立下flag）每日10道前端面试题-11 关于事件十问

eventType 是如onclick一样的带有”on“的事件，绑定事件时，handler可以是具名函数，也可以是匿名函数，但是匿名函数无法移除

我们会发现，IE 事件模型与我们平时用的事件绑定方法addEventListener，也就是下面要说的 DOM2 级事件模型有点相似，但是 IE 事件模型仅在 IE 浏览器中有效，不兼容其他浏览器

DOM2 级事件模型 W3C标准模型，也是我们频繁使用的事件模型，除 IE6-8 以外的所有现代浏览器都支持该事件模型

DOM2 级事件模型共有三个阶段：

1. 事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行

2. 事件处理阶段：事件在达到目标元素时，触发监听事件

3. 事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行

function a() {   …   }

function b() {   …   }

input.addEventListener( “click” ,a)

input.removeEventListener( “click” ,a)

第二问：介绍下这三种事件模型的区别

---

• Dom0 模型：

1. this指向： 指向函数中的this指向的是 被绑定的元素

2. 绑定多个同事件类型的事件时，如对同个元素绑定多个 click， 则后面的会覆盖前面的，最后只有一个会执行

• IE 模型：

1. this指向： 指向函数中的this指向的是** window**

2. 绑定多个同事件类型的事件时，如对同个元素绑定多个 click，则后面的不会覆盖前面的，执行顺序是 先执行下面的，从下往上执行

3. 只有两个参数：第一个参数为 事件类型，第二个为事件执行函数

4. 目标阶段，事件冒泡阶段

5. 获取目标元素： window.event.srcElement

• Dom2 模型：

1. this指向： 指向函数中的this指向的是 被绑定的元素

2. 绑定多个同事件类型的事件时，如对同个元素绑定多个 click，则后面的不会覆盖前面的，执行顺序是 先执行上面的，从上往下执行

3. 有三个参数：第一个参数为 事件类型，第二个为事件执行函数，第三个为布尔值，表示是否用事件捕获

4. 有事件捕获阶段，处于目标阶段，事件冒泡阶段

5. 获取目标元素： event.target 欢迎补充。。。

第三问：请介绍下事件流？

---

事件流所描述的就是从页面中接受事件的顺序，事件流分为两种：事件冒泡（主流）和事件捕获. 版本IE（IE8及以下版本）不支持捕获阶段

1、事件冒泡

事件开始时由具体元素接收，然后逐级向上传播到父元素

2、事件捕获

父元素的节点更早接收事件，而具体元素最后接收事件，与事件冒泡相反

第四问 怎么阻止事件冒泡和事件捕获以及默认事件？

---

1. 阻止事件冒泡 ：使用 e.stopPropagation(); IE使用 window.event.cancelBubble = true;

function stopBubble(e){

if(e&&e.stopPropagation){

e.stopPropagation();

}else{

window.event.cancelBubble = true;

}

}

2. 阻止事件捕获：与冒泡一样 使用`e.stopPropagation()，IE没有捕获阶段，所以不用

3. 阻止默认事件：

function stopDefault(e){

if(e&&e.preventDefault()){

e.preventDefault();

}else{

windown.event.returnValue = false

}

}

第六问：事件的委托（代理 Delegated Events）的原理以及优缺点委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，

---

优点是：

（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

缺点是：

事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。

例子：

• one
• two
• three

• 要求：兼容浏览器 考点：事件对象e，IE下事件对应的属性名。 重点是要说到target,currentTarget以及IE下的srcElement和this。

  第七问：编写一个自定义事件类，包含on/off/emit/once方法

  ---

  

  可能谈到Evnet，customerEvent，document.createEvent

  第八问：怎样判断js脚本是否加载完，并在加载完后进行操作

  ---

  在工作过程中，经常会遇到按需加载的需求，即在脚本加载完成后，返回一个回调函数，在回调函数中进行相关操作，那如何去判断脚本是否加载完成了呢？

  可以对加载的js对象使用onload来判断，jsDom.onload

  ie6、7不支持js.onload方法，使用js.onreadystatechange来解决 js.onreadystatechange来跟踪每个状态的变化（loading、loaded、interactive、complete），当返回状态为loaded或者complete时，表示加载完成，返回回调函数.

  function loadJsAsync(url){

  var body = document.getElementsByTagName(‘body’)[0];

  var jsNode = document.createElement(‘script’);

  jsNode.setAttribute(‘type’, ‘text/javascript’);

  jsNode.setAttribute(‘src’, url);

  body.appendChild(jsNode);

  if (jsNode.onload) {

  jsNode.onload = function() {

  // do something

  }

  } else {

  // ie6, ie7不支持onload的情况

  jsNode.onreadystatechange = function() {

  if(jsNode.readyState == ‘loaded’ || jsNode.readyState == ‘complete’) {

  // 异步js加载完毕

  // do something执行操作

  }

  }

  }

  }

  第九问：上面的代码中，script脚本是什么时候开始加载的？

  ---

  在 body.appendChild(jsNode);这一步，即添加到文档上后开始加载，这跟image不同，image是 image.src = url后开始加载

  第十问 如何判断页面是否加载完成？

  ---

  方式一：window.onload：

  当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。

  window.οnlοad=function(){

  }

  }

  }

  第九问：上面的代码中，script脚本是什么时候开始加载的？

  ---

  在 body.appendChild(jsNode);这一步，即添加到文档上后开始加载，这跟image不同，image是 image.src = url后开始加载

  第十问 如何判断页面是否加载完成？

  ---

  方式一：window.onload：

  当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。

  window.οnlοad=function(){