学习笔记 2020-11-19

JavaScript 高级程序设计(第4版) 阅读记录

事件

事件类型

HTML5 事件

1. DOMContentLoaded 事件

   在 DOM 树构建完成后立即触发。

2. readystatechange 事件

   event.readyState:

   • uninitialized
   • event.loading
   • event.loaded
   • event.interactive
   • event.complete

3. pageshow 与 pagehide 事件

   往返缓存

4. hashchange 事件

   用于在 URL 散列值发生变化时触发。

设备事件

1. orientationchange 事件

   判断设备处于垂直还是水平模式。

   window.orientation

2. deviceorientation 事件

   • event.alpha
   • event.beta
   • event.gamma
   • event.absolute
   • event.compasCalibrated

3. devicemotion 事件

   • event.acceleration
   • event.accelerateionIncludingGravity
   • event.interval
   • event.rotationRate

触摸及手势事件

1. 触摸事件

   • touchstart
   • touchmove
   • touchend
   • touchcancel

   event对象提供以下属性：

   • bubbles
   • cancelable
   • view
   • clientX
   • clientY
   • screenX
   • screenY
   • detail
   • altKey
   • shiftKey
   • ctrlKey
   • metaKey
   • touches
   • targetTouches
   • changedTouches

   每个 Touch 对象包含以下属性：

   • clientX
   • clientY
   • pageX
   • pageY
   • screenX
   • screenY
   • target

2. 手势事件

   • gesturestart
   • gesturechange
   • gesureend

事件参考

内存与性能

事件委托

减少页面所需内存，提升性能，节省 DOM 引用。

删除事件处理程序

直接替换 innerHTML ，不会删除其中元素上的事件处理程序。

页面卸载后如果事件处理程序没有被清理，则仍然残留在内存中。

模拟事件

DOM 事件模拟

通过 document.createEvent() 创建 event 对象。通过 dispatchEvent() 触发事件。

1. 模拟鼠标事件

现代 JavaScript 教程

调度：setTimeout 和 setInterval

alert 弹窗时计时器依然在计时。

任务

1. 每秒输出一次

   编写一个函数 printNumbers(from, to)，使其每秒输出一个数字，数字从 from 开始，到 to 结束。

   使用以下两种方法来实现。

   1. 使用 setInterval。
   2. 使用嵌套的 setTimeout。

   function printNumbers(from, to) {
     let count = from;
     let timeId = setInterval(() => {
       console.log(count);
       if (count === to) {
         clearInterval(timeId);
         timeId = null;
       }
       count++;
     }, 1000);
   }
   printNumbers(5, 10);
   
   function printNumbers(from, to) {
     function run(num, to) {
       console.log(num);
       if (num < to) {
         setTimeout(run, 1000, num + 1, to);
       }
     }
     setTimeout(run, 1000, from, to);
   }
   printNumbers(5, 10);

2. setTimeout 会显示什么？

   下面代码中使用 setTimeout 调度了一个调用，然后需要运行一个计算量很大的 for 循环，这段运算耗时超过 100 毫秒。

   调度的函数会在何时运行？

   1. 循环执行完成后。
   2. 循环执行前。
   3. 循环刚开始时。

   alert 会显示什么？

   let i = 0;
   
   setTimeout(() => alert(i), 100); // ?
   
   // 假设这段代码的运行时间 >100ms
   for(let j = 0; j < 100000000; j++) {
     i++;
   }

   循环执行完成后。100000000。