js面试之DOM事件流、cookie、作用域链等

Devil
134 阅读5分钟

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

事件冒泡、事件捕获、事件委托、事件绑定

  • DOM事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。
  • 事件对象兼容性问题：IE 6、7、8通过 window.event 实现
// 兼容写法
event = event || windows.event
  • 返回触发事件的对象：IE 6、7、8通过 event.srcElement 实现
target = event.target || event.srcElement

  • 阻止对象默认行为

  • e.preventDefaule(); 是一个方法，适合普通浏览器

  • e.returnValue; 是一个属性，适用于 IE 6 7 8

  • return false; 没有兼容性问题，但是需要注意后面的语句就不执行了，直接跳出

  • 阻止冒泡

  • event.stopPropagation(); 一般浏览器停止冒泡

  • event.cancelBubble // IE 6 7 8 的停止冒泡

事件绑定

  • 想要js对用户操作做出响应，就要对DOM元素绑定事件处理函数
  • this:绑定事件的对象
  • event.target触发事件的对象，即点击的那个对象
  • 普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
  • addEventListener不兼容低版本IE
  • addEventListener支持事件冒泡+事件捕获
  • 事件绑定监听函数以及移除的方式如下:addEventListener(eventType, handler, useCapture)、removeEventListener(eventType, handler, useCapture)
  • 特性：
    • 可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突
    • 当第三个参数(useCapture)设置为true就在捕获过程中执行，反之在冒泡过程中执行处理函数

事件冒泡

  • 哪些可以冒泡，哪些不可以？

事件捕获

  • 事件捕获与事件冒泡相反，事件最开始由不太具体的节点最早接收事件, 而最具体的节点（触发节点）最后接收事件

事件委托

  • 不给每个子节点单独设置事件监听器，而是设置再其父节点上，然后利用时间冒泡原理设置每个节点
  • 实现机制：事件冒泡
  • 事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点或文档
window.onload = function () {
  var ull = document.getElementById("bb")
  // 在鼠标指针移动到指定的元素上时发生
  ull.onmouseover = function (e) {
    var ev = e || window.event
    var target = ev.target || ev.srcElement
    if (target.nodeName.toLowerCase() == 'li') {
      target.style.background = "yellow"
    } 
  }
}
  • 优点
    • 只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有的元素绑定事件，减少dom操作，减少内存占用空间，提升性能
    • 动态新增的元素无需重新绑定事件
  • 注意：不支持事件冒泡的事件就不适合使用事件委托

cookie与本地存储的区别

  • cookie是小甜饼的意思，只有4kB左右，主要用途：保存登录信息
    • http协议是一种无状态协议，即每次服务端收到客户端的请求时，都是一个全新的请求，服务器并不知道客户端的历史请求记录，cookie来弥补了无状态特性
  • localStorage是H5新加入的技术
  • sessionStorage中session是会话的含义，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage中的数据会被清空

三者的异同

  • 以下列举排序cookie\ localStorage\ sessionStorage
  • 数据的生命周期
    • 一般由服务器生成，可设置失效时间。如果在浏览器端生成cookie，默认是关闭浏览器后失效
    • 除非被清除，否则永久有效
    • 仅在当前会话下有效，关闭页面或浏览器后被清除
  • 存放数据
    • 4k左右
    • 5MB
  • 与服务端通信
    • 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
    • 仅在客户端（即浏览器）中保存，不参与和服务器的通信
  • 易用性
    • 需要程序员自己封装，源生的cookie接口不友好
    • 源生接口可以接受，也可以再次封装来对Object和Array有更好的支持

ES6新特性

作用域

  • 全局作用域
  • 函数作用域
  • 块级作用域

js编译原理

  • 编译阶段
  • 执行阶段（js引擎）

作用域链

  • 作用域与作用域的嵌套，就形成了作用域链
  • 作用域链的作用：
    • 保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
  • 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链

let与var与const的区别

  • var声明的变量会挂载在window上，而let和const声明的变量不会，即不是全局对象的属性
  • var声明的变量，存在变量提升，let和const不存在，如果在let和const之前使用，会导致报错
  • 暂时性死区的本质：块级作用域必须先声明后使用的性质
  • const声明的变量与let声明的变量类似，不同之处
    • const变量只能在声明时赋值，不可随意修改，否则会导致语法错误
    • const只是保证变量名指向的地址不变，可以修改该地址的数据
avatar
文章
阅读
粉丝