JS红宝书·读书笔记 -- 下篇

JavaScript 高级程序设计

个人博客：https://yeaseonzhang.github.io

花了半个多月的时间，终于又把“JS红宝书”又撸了一遍。

第一次读“JS红宝书”还是2015年初学JS的时候，那时候只是把语法部分读了一遍，还有一些浏览器相关知识做了下了解，大概也就读了半本的样子，
就开始了用JS进行开发了，在成长的道路上遇见了JQuery，当时真的是感觉到JQuery太友好了，慢慢放下了原生开发。

现在呢，更多的时候是在用框架进行开发，越来越觉得自己的JS基础很缺乏，然后就开启了“JS红宝书”二刷之路。

下面就把书中自己觉得重要的、没有掌握的知识整理出来。因为我觉得还是会三刷“JS红宝书”，希望把这本700多页的书越读越薄，勉励。

章节

事件
表单脚本
HTML5脚本编程
错误处理与调试
JSON
Ajax 与 Comet
高级技巧
离线应用与客户端存储
新型的API

事件

事件流

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。

事件捕获

Netscape 团队提出的事件流叫做事件捕获，事件捕获的用意在于在事件到达预定目标之前捕获它。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件处理程序

DOM0 级事件处理程序

每个元素（包括window和document）都有自己的事件处理程序，这些属性通常全部小写。

var btn = document.getElementById('myBtn');
btn.onclick = function () {
    console.log('clicked');
}

DOM 0级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行，也就是说程序中的this可以引用当前元素。

var btn = document.getElementById('myBtn');
btn.onclick = function () {
    console.log(this.id);  // 'myBtn'
}

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

DOM2 级事件处理程序

addEventListener()
removeEventListener()

定义了两个方法用于处理指定和删除事件处理程序的操作。所有的DOM节点中都包含这两个方法，接受三个参数：事件名、事件处理程序和布尔值。最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；false表示在冒泡阶段调用事件处理程序，默认是false。

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除。如果通过addEventListener()添加的匿名函数将无法移除。

btn.addEventListener('click', function () {  //匿名函数
    ...
})

注：大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段（false），这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。

IE事件处理程序

attachEvent()
detachEvent()

这两个方法接受两个参数：事件名（带on）和事件处理函数。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert("Clicked");
});

注：在IE 中使用attachEvent()与使用DOM0 级方法的主要区别在于事件处理程序的作用域。

DOM0 级作用域是其所属元素
attachEvent()方法的作用域是全局（this === window）

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert("Clicked");
});
btn.attachEvent("onclick", function(){
    alert("Hello world!");
});

注：与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。单击这个例子中的按钮，首先看到的是"Hello world!"，然后才是"Clicked"。

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event。

DOM中的事件对象

event对象成员

在事件处理程序内部，对象this 始终等于currentTarget 的值，而target 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget 和target 包含相同的值。

document.body.onclick = function(event){
    alert(event.currentTarget === document.body); //true
    alert(this === document.body); //true
    alert(event.target === document.getElementById("myBtn")); //true
};

调用event方法

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
};

跨浏览器的事件对象

var EventUtil = {
    addHandler: function(element, type, handler){
        //省略的代码
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    removeHandler: function(element, type, handler){
        //省略的代码
    },
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

事件类型

UI 事件

load事件
unload事件
resize事件
scroll事件

焦点事件

blur事件：失去焦点
focus事件：获得焦点

鼠标与滚动事件

click事件
dbclick事件
mousedown事件：按下鼠标
mouseenter事件：光标移入
mouseleave事件：光标移出
mousemove事件：鼠标在元素内部移动重复触发
mouseout事件：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素
mouseover事件：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发
mouseup事件：释放鼠标按钮时触发

页面上的所有元素都支持鼠标事件。除了mouseenter 和mouseleave，所有鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。

只有在同一个元素上相继触发mousedown 和mouseup 事件，才会触发click 事件；如果mousedown 或mouseup 中的一个被取消，就不会触发click 事件。

触摸设备

iOS和Android设备的相关事件：

不支持dbclick事件。双击浏览器窗口会放大画面
轻击可单击元素会触发mousemove事件。。如果此操作会导致内容变化，将不再有其他事件发生；如果屏幕没有因此变化，那么会依次发生mousedown、mouseup 和click 事件。轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素（如链接），或者那些已经被指定了onclick 事件处理程序的元素。
mousemove事件也会触发mouseover和mouseout事件
两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件。

HTML5事件

contextmenu事件
beforeunload事件
DOMContentLoaded事件
readystatechange事件
- uninitialized未初始化
- loading
- loaded
- interactive:可以操作对象，但还没有完全加载
- complete
hashchange事件

设备事件

orientationchange事件：横竖屏，有三个值： -90 ，0， 90

触摸与手势事件

触摸事件
- touchstart
- touchmove
- touchend
- touchcancel
手势事件
- gesturestart
- gesturechange
- gestureend

内存和性能

事件委托

例如在

click

子元素点击事件都会冒泡到

JS红宝书·读书笔记 -- 下篇

章节

事件

事件流

事件冒泡

事件捕获

DOM事件流

事件处理程序

DOM0 级事件处理程序

DOM2 级事件处理程序

IE事件处理程序

事件对象

DOM中的事件对象

跨浏览器的事件对象

事件类型

UI 事件

焦点事件

鼠标与滚动事件

触摸设备

HTML5事件

设备事件

触摸与手势事件

内存和性能

事件委托

表单脚本

表单基础知识

提交表单

重置表单

表单字段

文本框脚本

过滤输入

HTML5约束验证API

输入模式

检测有效性

禁用验证

HTML5 脚本编程

跨文档消息传递

原生拖放

拖放事件

dataTransfer对象

drapEffect 与 effectAllowed

可拖动

其他成员

错误处理与调试

错误处理

try-catch 语句

finally子句

错误类型

抛出错误

自定义错误类型

Error事件

常见的错误类型

JSON

解析与序列化

JSON对象

序列化选项

过滤结果

字符串缩进

toJSON()方法

解析选项

Ajax与Comet

XMLHttpRequest 对象

XHR的用法

HTTP 头部信息

GET请求

POST请求

XMLHttpRequest 2 级

FormData

超时设定

overrideMimeType()方法

进度事件

跨资源共享

IE对CORS的实现

其他浏览器对CORS的实现

其他跨域技术

图像Ping

JSONP

你可能感兴趣的:(JS红宝书·读书笔记 -- 下篇)

`finally`子句

`toJSON()`方法