【必看】JavaScript面试题集合(三)

JavaScript面试题集合(三)

目录：

• JS中的事件、事件冒泡和事件捕获、事件委托
• javascript 代码中的"use strict
• 变量范围
• js遍历的几种方式
• Object与Function的关系

1.JS中的事件模型

事件模型：

详细请参考：https://www.cnblogs.com/leftJS/p/10948138.html

JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。

• 原始事件模型

  所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件：

  <!-- 在html代码中直接指定属性值 -->
  <button id="demo" type="button" onclick="doSomeTing()" />　
  

  // 在js代码中为　
  document.getElementsById("demo").onclick = doSomeTing()
  

  优点：所有浏览器都兼容

  缺点：1）逻辑与显示没有分离；2）相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的，如：a.onclick = func1; a.onclick = func2;将只会执行func2中的内容。3）无法通过事件的冒泡、委托等机制（后面会讲到）完成更多事情

• DOM2事件模型

  此模型是W3C制定的标准模型，现代浏览器（IE6~8除外）都已经遵循这个规范。W3C制定的事件模型中，一次事件的发生包含三个过程：

  (1).事件捕获阶段，(2).事件目标阶段，(3).事件冒泡阶段

  看下图

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。

• IE事件模型

  IE的事件模型只有两步，先执行元素的监听函数，然后事件沿着父节点一直冒泡到document。IE的事件模型已经可以解决原始模型的三个缺点，但其自己的缺点就是兼容性，只有IE系列浏览器才可以这样写

  var demo = document.getElementById('demo');
  
      if(demo.attachEvent){
       
  
          demo.attachEvent('onclick',func);
  
      }else{
       
  
          demo.addEventListener('click',func,false);
  
  }
  

事件：

• 事件概念：事件，大部分情况下指的是用户的鼠标动作和键盘动作，如点击、移动鼠标、按下某个键。事件被封装成一个event对象，包含了该事件发生时的所有相关信息（event的属性）以及可以对事件进行的操作（event的方法）

事件常见的属性：

事件	说明
clientX/clientY	距浏览器可视区域（工具栏除外区域）左/上的距离
pageX/pageY	距页面左/上的距离，它与clientX/clientY的区别是不随滚动条的位置变化
screenX/screenY	距计算机显示器左/上的距离，拖动你的浏览器窗口位置可以看到变化
target	发生事件的节点
currentTarget	当前正在处理的事件的节点，在事件捕获或冒泡阶段
timeStamp	事件发生的时间，时间戳
bubbles	事件是否冒泡
cancelable	事件是否可以用preventDefault()方法来取消默认的动作
keyCode	按下的键的值

常见的方法：

方法	说明
event. preventDefault()	阻止元素默认的行为，如链接的跳转、表单的提交
event. stopPropagation()	阻止事件冒泡
event.initEvent()	初始化新事件对象的属性，自定义事件会用，不常用

常见的事件类型：

事件类型	说明
Events	包括所有的事件
HTMLEvents	包括 ‘abort’, ‘blur’, ‘change’, ‘error’, ‘focus’, ‘load’, ‘reset’, ‘resize’, ‘scroll’, ‘select’, ‘submit’, ‘unload’. 事件
UIEevents	包括 ‘DOMActivate’, ‘DOMFocusIn’, ‘DOMFocusOut’, ‘keydown’, ‘keypress’, ‘keyup’. 间接包含 MouseEvents.
MouseEvents	包括 ‘click’, ‘mousedown’, ‘mousemove’, ‘mouseout’, ‘mouseover’, ‘mouseup’
MutationEvents	包括 ‘DOMAttrModified’, ‘DOMNodeInserted’, ‘DOMNodeRemoved’, ‘DOMCharacterDataModified’, ‘DOMNodeInsertedIntoDocument’, ‘DOMNodeRemovedFromDocument’, 'DOMSubtreeModified

2. javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么

use ‘strict’： "严格模式"是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。这种模式使得Javascript在更严格的条件下运行。

设立"严格模式"的优点：

1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

2. 消除代码运行的一些不安全之处，保证代码运行的安全；

3. 提高编译器效率，增加运行速度；

4. 为未来新版本的Javascript做好铺垫。

严格模式的示例：