12.4 DOM中的范围
13.2-13.3 跨浏览器事件处理程序&跨浏览器的事件对象
- UI事件（用户与页面元素交互时触发）DOMActivate、load、unload、abort、error、select、resize、scroll
- 焦点事件（元素获得或失去焦点时触发）blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout
- 鼠标与滚轮事件（用户通过鼠标在页面执行操作时触发&使用鼠标滚轮时触发）click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup
- 键盘与文本事件（用户通过键盘在页面执行操作时触发&在文档中输入文本时触发）
- textInput：在可编辑区域输入字符时触发，其event对象有以下属性
- data 表示用户输入的字符
- inputMethod 表示文本输入到文本框中的方式
- 0：不确定、1：键盘、2：粘贴、3：拖放、4：IME、5：通过在表单中选择某一项输入的、6：手写（如手写笔）、7：语音、8：几种方式组合、9：脚本
- textInput：在可编辑区域输入字符时触发，其event对象有以下属性
- 复合事件（当IME即Input Method Editor，输入法编辑器，输入字符时触发）
- 变动事件（当底层DOM结构发生变化时触发）
- HTML5事件
- contextmenu:显示自定义上下文菜单
- beforeunload:在浏览器卸载之前触发
- DOMContentLoaded:不需要等所有文件资源都加载完，在形成完整的DOM树之后就会别触发（对于不支持的浏览器，可以在加载期间设置一个时间为0毫秒的超时调用：setTimeout(function(){},0);)
- 设备事件
- 触摸与手势事件
- 触摸事件（以下事件都会冒泡，都可取消）
- touchstart：手指触摸屏幕时触发；即使已有一个手指放在屏幕上也会触发
- touchmove：手指在屏幕上滑动时连续地触发，此事件期间调用preventDefault()可以阻止滚动
- touchend：手指从屏幕上移开时触发
- touchcancel：系统停止跟踪触摸时触发。
- 手势事件
- gesturestart：当一只手已经按在屏幕上而另一只手又触摸屏幕时触发
- gesturechange：当触摸屏幕的任何一个手指的位置变化时触发
- gestureend：当任何一个手指从屏幕上移开时触发
- 触摸事件（以下事件都会冒泡，都可取消）
-
选择文本
-
过滤输入
-
HTML5约束验证API
- 必填字段：required属性，拥有该属性则为必填选项
- 输入其他类型：HTML为input新增几个值，可以反映类型信息同时拥有默认验证功能。如："email"和"url"
- 数值范围
- 输入模式：pattern属性
- 如：pattern="\d+" 表示只允许输入文字
- 检测有效性：**checkValidity()**方法，若字段值有效，返回true，否则返回false。
- 可以对表单调用该方法，若所有表单字段都有效，则返回true，即使只有一个字段无效，这个方法也会返回false。
- validity属性可以告诉你为什么字段有效或无效
- 禁用验证：通过设置novalidate属性，可以告诉表单不进行验证
- 选择选项:getSelectedOptions()获得所有选中项
- 添加选项
- 创建并添加文本节点
- Option构造函数，接收两个参数：文本（text）和值（value），第二个参数可选；
- var newOption=new Option("Option text", "Option value"); selectbox**.appendChild**(newOption);（除IE之外的浏览器都可以使用）
- add():两个参数：要添加的新选项和将位于新选项之后的选项，若在列表最后添加，第二个参数设置为null。
- var newOption=new Option("Option text", "Option value"); selectbox**.add**(newOption, undefined);（最佳方案）
- 移除选项
- removeChild()
- remove()
- 将相应选项设置为null
- 移除和重排选项
- contenteditable属性：true打开，false关闭，inherit从父元素继承
- 操作富文本：document.execCommand()方法对文档执行预定义的命令，可接受三个参数：要执行的命令名称，表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值（若不需要，则传递null）为确保跨浏览器兼容性，第二个参数应始终设为false
- 富文本选区：使用框架（iframe）的getSelection()方法，可以确定实际选择的文本
- 表单与富文本
- 先设置width和height
- 调用**getContext()**方法并传入上下文的名字。如“2d”，就可以获得2D上下文对象
- **toDataURL()**方法，可以导出canvas元素上绘制的图像，接收一个参数：图像的MIME类型，如"image/png"(注意：该方法是canvas对象的方法，不是上下文对象的方法）
-
填充和描边：默认值都是#000000
- 填充：fillStyle
- 描边：strokeStyle
-
绘制矩形：唯一一种可直接在2D上下文中绘制的形状
- fillRect()在画布上绘制的矩形会填充指定颜色，颜色由fillStyle属性指定
- strokeRect()在画布上绘制的矩形会使用指定颜色描边，颜色由strokeStyle属性指定
- 控制描边线条宽度:lineWidth，值可以是任意整数
- 控制线条末端形状：lineCap
- butt：平头
- round：圆头
- square：方头
- 控制线条相交方式：lineJoin
- round：圆交
- bevel：斜交
- miter：斜接
- clearRect()清除画布上的矩形区域
以上三个方法均接受四个参数，分别是：矩形的x坐标、矩形的y坐标、矩形的宽度以及矩形的高度。
-
绘制路径：要绘制路径，首先必须调用**beginPath()**方法
- arc(x,y,radius,startAngle,endAngle,countercolockwise)
- 以(x,y)为圆心绘制一条弧线
- 弧线半径为radius
- startAngle,endAngle两个参数表示起始和结束角度
- 最后一个参数表示startAngle,endAngle是否按逆时针方向计算，false表示顺时针
- arcTo(x1,y1,x2,y2,radius)
- 从上一点开始绘制一条弧线，到(x2,y2)为止
- 以给定的半径radius穿过(x1,y1)
- bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
- 从上一点开始，到(x,y)为止
- 以(c1x,c1y)和(c2x,c2y)为控制点
- lineTo(x,y)：从上一点开始绘制一条直线，到(x,y)为止
- moveTo(x,y)：将会图游标移动到(x,y)，不划线
- quadraticCurveTo(cx,cy,x,y)：从上一点开始绘制一条二次曲线，到(x,y)为止，以(cx,cy)为控制点
- rect(x,y,width,height)：从(x,y)点绘制一个矩形，宽高由width、height指定。该方法绘制的是矩形路径，并非strokeRect()和fillRect()绘制的独立的形状
- isPointInPath()：接x，y坐标作为参数，用于路径关闭前确定画布上的某一点是否位于路径上
- 绘制一条连接到路径起点的线条：closePath()
- 路径完成要填充：**fill()或调用stroke()**方法描边
- 在路径上创建剪切区域：clip()
- arc(x,y,radius,startAngle,endAngle,countercolockwise)
-
绘制文本：fillText()、strokeText()均接受四个参数：要绘制的文本字符串，x坐标，y坐标和可选的最大像素宽度
- font：表示文本样式、大小及字体。如："10px Arial"
- textAlign：表示文本对齐方式。可能的值有："start"、"end"、"left"、"right"、"center"
- textBaseline：表示文本基线。可能的值有："top"、"hanging"、"middle"、"alphabetic"、"ideographic"、"bottom"
- measureText()：接收一个参数，即要绘制的文本，返回一个TextMrtrics对象，目前该对象值有一个width属性
-
变换
- rotate(angle)：围绕原点旋转图像angle弧度
- scale(scalex,scaley)：缩放
- translate(x,y)：将坐标原点移动到(x,y)
- transform(m1_1,m1_2,m2_1,m2_2,dx,dy)：直接修改变换矩阵
- setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy)：将矩阵重置为默认状态
- save()：保存绘图对上下文的设置及变换，不会保存内容
-
绘制图像：drawImage()
-
阴影
- shadowColor：阴影颜色
- shadowOffsetX：形状或x轴阴影偏移量
- shadowOffsetY：形状或y轴阴影偏移量
- shadowBlur：模糊像素数
-
渐变
- 线性渐变：createLinearGradient()，四个参数：起点的x坐标，起点的y坐标，终点的x坐标，终点的y坐标
- 径向渐变：createRadialGradient()，六个参数：前三个为起点圆心及半径，后三个为终点圆心和半径
-
模式：重复的图像，可调用createPattern()，两个参数：HTML img 元素和表示如何重复的字符串
-
使用图像数据：getImageData()取得原始图像数据，四个参数：要取得数据的画面区域的x坐标和y坐标以及该区域的像素宽度和高度
-
合成
- globalAlpha：指定所有绘制的透明度
- globalCompositionOperation：表示后绘制的图像怎样与先绘制的图形结合
- 类型化数组
- WebGL上下文
通过重写dragenter和dragover事件的默认行为，可以把任何元素变成有效的放置目标
- getData()
- setData()
- dropEffect：得知被拖动的元素能够执行哪种放置行为，可能的值如下
- "none"：不能把拖动元素放在这里
- "move"：应该将拖动元素移动到放置区域
- "copy"：应该将拖动元素复制到放置区域
- "link"：放置区域会打开拖动的元素（拖动的元素必须是一个链接，有URL）
- effectAllowed：表示允许拖动元素的哪种dropEffect，可能的值如下
- "uninitialized"：没有设置任何放置行为
- "none"：被拖动元素不能有任何行为
- "copy"：只允许值为"copy"的dropEffect
- "link"：只允许值为"link"的dropEffect
- "move"：只允许值为"move"的dropEffect
- "copyLink"：只允许值为"copy"和"link"的dropEffect
- "copyMove"：只允许值为"copy"和"move"的dropEffect
- "linkMove"：只允许值为"link"和"move"的dropEffect
- "all"：允许任意dropEffect
- history.pushState()方法
- 通过状态管理API，能够在不加载新页面的情况下改变浏览器的URL、
- 接收三个参数：状态对象，新状态标题，可选的相对URL
- popstate事件，该事件的事件对象只有一个state属性，该属性包含当初以第一个参数传递给pushState()的状态对象
- replaceState()，用来更新当前状态，前两个参数与pushState()的前两个参数相同
JavaScript字符串与JSON字符串的最大区别：JSON字符串必须使用双引号
JS中的对象字面量
var person ={
name:"Nicholas",
age:29
};
或
var object={
"name":"Nicholas",
"age":29
};
JSON的表示方法如下
{
"name":"Nicholas",
"age":29
}
两点不同：1.JSON对象没有声明变量 2.没有末尾的分号
JavaScript
var values=[25,"hi",true];
JSON（同样没有变量和分号）
[25,"hi",true]
- stringfy()：把JavaScript对象序列化为JSON字符串（可接受参数进行筛选）
- parse（)：把JSON字符串解析为原生的JavaScript值
- 过滤选项
- 字符串缩进
- toJSON()：返回其自身的JSON数据格式
-
open()：接收三个参数
- 要发送的请求类型（"get"、"post"等）
- 请求的URL
- 表示是否异步发送的布尔值
xhr.open("get","example.php",false);open()方法并不会真正发送请求，只是启动一个请求以备发送
-
send()：发动特定的请求，接受一个参数：要作为请求主体发送的数据
如果不需要通过请求主体发送数据，则必须传入null
-
abort()：取消异步请求
最常用于向服务器查询某些信息，可以将查询字符串参数追加到URL的末尾
为了避免查询字符串的格式有问题，查询字符串中的参数名称和值必须使用encodeURIComponent()进行编码
通常用于向服务器发送应该被保存的数据