javascript学习笔记（3）

一、学习资料

https://wangdoc.com/javascript/index.html

二、学习笔记

javascript学习笔记（2）

9、事件

1）监听函数内部的this，指向当前事件所在的那个对象。
2）JavaScript 有三种方法，可以为事件绑定监听函数：
①HTML 的 on- 属性：只会在冒泡阶段触发。完整的监听代码（doSomething () ）。不利于代码分工，因此不推荐使用。
②元素节点的事件属性：只会在冒泡阶段触发。值是函数名（doSomething）。缺点在于，同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。因此，也不推荐使用。
③EventTarget.addEventListener()：同一个事件可以添加多个监听函数。能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。除了 DOM 节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。推荐！
3）事件的传播：捕获阶段-》目标阶段-》冒泡阶段
4）事件的代理：父元素统一处理子元素的事件（因为冒泡向上传播）
5）如果希望事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。
6）如果想要彻底取消该事件，不再触发后面所有click的监听函数，可以使用stopImmediatePropagation方法。
7）事件的原始触发节点（Event.target），事件当前正在通过的节点（Event.currentTarget）。e.currentTarget总是等同于监听函数内部的this。
8）点击鼠标触发顺序：mousedown、mouseup、click、dblclick
9）mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。
10）如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下：
keydown
keypress（有值才会触发这个事件）
keydown
keypress
…（重复以上过程）
keyup
11）error事件有一个特殊的性质，就是不会冒泡。所以，子元素的error事件，不会触发父元素的error事件监听函数。
12）input事件在元素的值发生变化后立即发生，而change在元素失去焦点时发生，而内容此时可能已经变化多次。也就是说，如果有连续变化，input事件会触发多次，而change事件只在失去焦点时触发一次。
13）拖拉过程只触发以上这些拖拉事件，尽管鼠标在移动，但是鼠标事件不会触发。

10、浏览器模型

1）脚本的执行顺序由它们在页面中的出现顺序决定，加载顺序是并行的。
2）一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。
3）Cookie 不是一种理想的客户端储存机制。它的容量很小（4KB），缺乏数据操作接口，而且会影响性能。客户端储存应该使用 Web storage API 和 IndexedDB。只有那些每次请求都需要让服务器知道的信息，才应该放在 Cookie 里面。
4）浏览器访问某个路径之前，就会找出对该域名和路径有效，并且还没有到期的 Cookie，一起发送给服务器。
5）两个网址只要域名相同和端口相同（不要求协议相同），就可以共享 Cookie。
6）cookie同时指定了Expires和Max-Age，那么Max-Age的值将优先生效。
7）cookie规避同源限制：如果两个网页一级域名相同，只是次级域名不同，浏览器允许通过设置document.domain共享 Cookie。
8）对于完全不同源的网站，目前有两种方法，可以解决跨域窗口的通信问题：片段识别符、
跨文档通信API（postMessage）
9）除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），AJAX有三种方法规避同源限制：
①JSONP：callback，只能发GET请求。JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。
②WebSocket：Origin
③CORS：允许任何类型的请求。实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨域通信。
10）非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为“预检”请求（preflight）。“预检”请求的头信息（Origin、Access-Control-Request-Method、Access-Control-Request-Headers）
11）注意，storage 事件有一个很特别的地方，就是它不在导致数据变化的当前页面触发，而是在同一个域名的其他窗口触发。也就是说，如果浏览器只打开一个窗口，可能观察不到这个事件。比如同时打开多个窗口，当其中的一个窗口导致储存的数据发生改变时，只有在其他窗口才能观察到监听函数的执行。可以通过这种机制，实现多个窗口之间的通信。
12）总之，pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。
13）Blob 对象与 ArrayBuffer 的区别在于，它用于操作二进制文件，而 ArrayBuffer 用于操作内存。
14）文件上传的时候enctype属性要改成multipart/form-data。
15）IndexedDB 具有以下特点：键值对储存、异步、支持事务、同源限制、储存空间大（一般来说不少于 250MB，甚至没有上限）、支持二进制储存
16）Web Worker 的作用，就是为 JavaScript 创造多线程环境：同源限制、DOM 限制（无法读取主线程所在网页的 DOM 对象）
17）JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。这使得主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生性能负担。不会生出大文件的copy。

11、网页元素接口

over！