沉没

0%

学习笔记 2020 11 17

发表于 分类于
本文字数： 1.7k 阅读时长 ≈ 2 分钟

学习笔记 2020-11-17

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

事件

事件类型

用户界面事件
  • DOMActivate
  • load
  • unload
  • abort
  • error
  • select
  • resize
  • scroll

  1. load 事件

    一般来说，在 window 上发生的事件，都可以通过给 <body> 元素上对应的属性赋值来指定。

  2. unload 事件

  3. resize 事件

  4. scroll 事件

    scroll 事件发生在 window 上。在混杂模式下，可以通过 body 元素检测 scrollLeft 和 scrollTop 属性的变化。在标准模式下，这些变化在除早期版的 Safari 之外的所有浏览器上都发生在 html 元素上。

    window.addEventListener('scroll', event => {
  if (document.compatMode == 'CSS1Compat') {
    console.log(document.documentElement.scrollTop);
  } else {
    console.log(document.body.scrollTop);
  }
});
焦点事件
  • blur
  • DOMFocusIn
  • DOMFocusOut
  • focus
  • focusin
  • focusout
鼠标和滚轮事件
  • click，响应鼠标主键和键盘回车键。
  • dbclick
  • mousedown
  • mouseenter，鼠标光标从元素外部移到元素内部。不冒泡。
  • mouseleave，鼠标光标从元素内部移到元素外部。不冒泡。
  • mousemove，鼠标光标在元素上移动。
  • mouseout，鼠标光标从一个元素移到另一个元素。
  • mouseover，鼠标光标从元素外部移到元素内部。
  • mouseup
  • mousewheel，鼠标滚轮事件。

触发顺序：

  1. mousedown
  2. mouseup
  3. click
  4. mousedown
  5. mouseup
  6. click
  7. dbclick

click 和 dbclick 依赖其他事件触发。

  1. 客户端坐标

    • event.clientX
    • event.clientY

    鼠标光标在视口中的坐标。

  2. 页面坐标

    • event.pageX
    • event.pageY

    鼠标光标在页面上的坐标。

  3. 屏幕坐标

    • event.screenX
    • event.screenY

    鼠标光标在整个屏幕上的坐标。

  4. 修饰键

    • event.shiftKey
    • event.ctrlKey
    • event.altKey
    • event.metaKey

现代 JavaScript 教程

函数对象，NFE

  1. 属性，name

    函数名

  2. 属性，length

    函数形参个数，rest 参数不参与计数。

  3. 自定义属性

  4. 命名函数表达式

任务

  1. 为 counter 添加 set 和 decrease 方法

    修改 makeCounter() 代码，使得 counter 可以进行减一和设置值的操作：

    • counter() 应该返回下一个数字（与之前的逻辑相同）。
    • counter.set(value) 应该将 count 设置为 value。
    • counter.decrease(value) 应该把 count 减 1。

    查看沙箱中的代码获取完整使用示例。

    P.S. 你可以使用闭包或者函数属性来保持当前的计数，或者两种都写。

    function makeCounter() {
  function counter() {
    return counter.count++;
  }

  counter.count = 0;
  counter.set = function (value) {
    this.count = value;
  };
  counter.decrease = function (value) {
    this.count--;
  };

  return counter;
}

  2. 任意数量的括号求和

    写一个函数 sum，它有这样的功能：

    sum(1)(2) == 3; // 1 + 2
sum(1)(2)(3) == 6; // 1 + 2 + 3
sum(5)(-1)(2) == 6
sum(6)(-1)(-2)(-3) == 0
sum(0)(1)(2)(3)(4)(5) == 15

    P.S. 提示：你可能需要创建自定义对象来为你的函数提供基本类型转换。

    function sum(a) {
  let num = a;
  function f(n) {
    num += n;
    return f;
  }
  f.toString = function () {
    return num;
  };
  return f;
}