JS高级程序设计-笔记
2019-05-16 21:40:25 16 举报AI智能生成
js高级程序设计语言
作者其他创作
大纲/内容
13-事件
13.1-事件流
1. 事件冒泡（默认）
概念：从事件元素冒泡到外层元素
例子：点击 div 元素，事件触发流程：
div --> body --> html --> window
div --> body --> html --> window
2. 事件捕捉
概念：从外层元素传递到触发事件元素
例子：点击 div 元素，事件触发流程：
window --> html --> body --> div
window --> html --> body --> div
3. DOM事件流
事件流说明:
document --> html --> body --> div --> body --> html --> document
捕获阶段到 body 会直接跳转到目标元素(触发事件元素)上
document --> html --> body --> div --> body --> html --> document
捕获阶段到 body 会直接跳转到目标元素(触发事件元素)上
13.2-事件处理程序
1. 事件移除和添加
IE9：addEventListener(事件, 函数, 事件流)
函数没有函数名，则无法用 removeEventListener 清除
删除事件：removeEventListener
IE8：attachEvent(on+事件, 函数)
函数没有函数名， 则无法将 detachEvent 清除
事件流：只会冒泡
删除事件：detachEvent
13.3-事件对象 event
1. 在指定事件元素时，
event.target == this == event.currentTarget
event.target == this == event.currentTarget
2. IE8 与 IE9 事件对应属性
冒泡：cancelBubble -> stopPropagation
默认行为：returnValue -> preventDefault
事件目标：srcElement -> target
ie8 事件属性
13.4-事件类型
1. UI 事件
概念：当用户与页面上的元素交互时触发
1. load：载入完成时触发
window.onload：页面载入完成时触发
img.onload：图片加载完成时触发
2. unload：卸载文档后触发
（页面跳转触发）
（页面跳转触发）
事件属性只包含 event.target
3. resize：调节浏览器大小时触发
防抖和节流（待续）
使用方法
window.addEventListener("resize", function(event){
alert("Resized");
});
alert("Resized");
});
4. scroll：滚动事件
防抖和节流（待续）
scrollTop 属性注意点
1. 给页面设置 document.documentElement.scrollTop，
在进入页面时可以定位高度，但刷新后就无效。
在进入页面时可以定位高度，但刷新后就无效。
2. 给 scrollTop 加一个定时器 setTime，刷新时就可以定位
window.onload = function() {
// 刷新有问题的写法
// document.documentElement.scrollTop = 1000;
// 刷新课定位的写法
setTimeout(function() {
document.documentElement.scrollTop = 1000;
},1)
}
// 刷新有问题的写法
// document.documentElement.scrollTop = 1000;
// 刷新课定位的写法
setTimeout(function() {
document.documentElement.scrollTop = 1000;
},1)
}
2. 焦点事件
概念：元素获取、失去焦点时触发
1. focus：获取焦点时触发。（不冒泡）
2. blur：失去焦点时触发。（不冒泡）
3. focusin：获取焦点时触发（冒泡）
4. focusout：失去焦点时触发（冒泡，FireFox不支持）
焦点元素改变时触发顺序
focusout --> focusin --> blur --> focus
3. 鼠标事件
1. click：鼠标单击事件
2. dblclick：鼠标双击事件
3. mouseenter：鼠标移入元素时触发，移入子元素不触发
4. mouseleave：鼠标移出元素时触发，移入子元素不触发
5. mouseout：鼠标移出元素时触发，移出子元素时也触发
6. mouseover：鼠标移入元素时触发，移入子元素时也触发
7. mousemove：鼠标在元素内部移动时重复触发
8. mousedown：鼠标任意键触发
鼠标按钮点击属性
介绍：只有鼠标点击或键盘回车时才会触发 click 事件，因此按钮检查信息没必要。
但对于 mousedown 和 mouseup 事件来说，就有意义了
但对于 mousedown 和 mouseup 事件来说，就有意义了
用法：event.button
概念：标时按下或释放按钮
标准：
0：表示鼠标主按钮（鼠标左键）
1： 表示滚轮按钮
2：表示鼠标次级按钮（鼠标右键）
IE8：
0：表示没有按下按钮
1：表示按下了主按钮
2：表示按下次级按钮
3：表示同时按下了主次按钮
4：表示按下了滚轮按钮
5：表示同时按下了主按钮和滚轮按钮
6：表示同时按下了次级按钮和滚轮按钮
7：表示三个按钮同时按下
9. mouseup：释放鼠标时触发
10. mousewheel：滚轮事件
给页面任何对象添加滚轮事件，都会冒泡到 window（标准） 或 document（IE8）
事件属性：event.wheelDelta
事件滚动距离位 120 的倍数，向上滚动为正数，向下滚动为负数
（1）双击元素触发事件流程
标准：
mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick
mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick
IE8：
mousedown --> mouseup --> click --> mouseup --> dblclick
mousedown --> mouseup --> click --> mouseup --> dblclick
（2）鼠标事件坐标位置（event）<br>
1. 页面坐标位置
pageX（不支持IE8）<br>
页面坐标
2. 视口坐标位置<br>
clientX
视口坐标
3. 屏幕坐标位置
screenX
屏幕坐标
（3）组合键（IE8不支持）
1. event.shiftKey<br>
shift 键<br>
2. event.ctrKey<br>
ctrl 键<br>
3. event.altKey<br>
alt 键<br>
4. event.metaKey<br>
window 键
4. 文本事件
textInput：textInput 事件是 DOM3 级事件中新加的事件，
当用户在可编辑区域中输入字符时，就会触发这个事件。
当用户在可编辑区域中输入字符时，就会触发这个事件。
与 keypress 的区别
1. 任何可以获得焦点的元素都可以触发 keypress 事件，但只有可编辑区域才能触发 textInput 事件。
2. textInput 事件只有在用户按下能够输入实际字符的键时才会被触发；而 keypress 事件则在按下那些能够影响文本显示的键时也能触发（例如退格键）。
作用：用于将文本显示给用户前更容易拦截文本
事件属性 event
event.inputMethod：把文本输入到文本框的方式
0，表示浏览器不确定是怎样输入的。
1，表示是使用键盘输入的。
2，表示文本是粘贴进来的。
3，表示文本是拖放进来的。
4，表示文本是用 IME 输入的。
5，表示文本是通过在表单中选择某一项输入的。
6，表示文本是通过手写输入的（比如手写笔）。
7，表示文本是通过语音输入的。
8，表示文本是通过几种方法组合输入的。
9，表示文本是通过脚本输入的。
event.data：输入的字符或字符串
5. 键盘事件
1. keydown：按下任意键触发，按住不动会重复触发
需要对其进行节流处理
2. keypress：按下字符键触发，按住不放会重复触发
需要对其进行节流处理
3. keyup：释放按键时触发
6. 变动事件
DOM 改变时触发
待补充
7. HTML5事件
1. contextmenu：鼠标右键调出上下文菜单（冒泡）
js 高程 P388 页
2. beforeunload：卸载也面前触发
event.returnValue：离开页面前的提示（open及之前不支持）
3. DOMContentLoaded：在页面刚加载完 dom 树就触发事件，
不必等到js、图像、css 资源加载完才触发
不必等到js、图像、css 资源加载完才触发
dom树已加载完，可以进行dom操作
4. readystatechange：提供文档或元素加载有关的信息 P390
支持该事件的文档都拥有一个 readyState 属性
1. uninitialized：未初始化
2. loading：正在加载
3. loaded：加载完毕
4. interactive：交互，可以操作对象，但还没加载完全
5. 加载完成
Tip：这个事件的 event 不提供任何属性
5. pageshow 和 pagehide （ie10+）
待补充
6. hashchange：hash 值变化时触发（IE8+）
event.oldURL 和 event.newURL：变化前后的 hash 值
支持情况：Firefox6+、Chrome、Opera
location.hash 当前 hash 值（兼容写法）
8. 设备事件
1. orientationchange：旋屏事件
旋转屏幕切换样式(可能有错误)
1. orientationchange写法
window.orentation: 旋转信息
0：正立
90：左倒
-90：右倒
2. css 写法
media
2. 兼容写法
2. MozOrientation（试验API）：设备方向改变时触发
event.x
event.y
event.z
js 高程 P396
3. deviceorientation：设备方向改变时在window上触发
待续
4. devicemotion：检测设备是不是在移动，还是在在往下掉或拿在手里
待续
9. 触摸和手势事件
1. 触摸事件
1. touchstart：手指放上屏幕上触发，即使已经放上手指，再次触摸还是会触发
2. touchend：手指离开屏幕时触发
3. touchmove：移动时连续触发。preventDefault() 可以阻止滚动
2. 手势事件
1. gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
2. gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
3. gestureend：当任何一个手指从屏幕上面移开时触发。
3. 移动端模拟点击事件
10. 模拟事件
待补充
Tip：触摸设备
1. 不支持双击事件
2. 轻击可触发事件
mousemove --> mousedown --> mouseup --> click
若 mousemove 触发事件，后面的事件不会再触发
若 mousemove 触发事件，后面的事件不会再触发
轻击不可单击的元素，不会触发任何事件。 可单击的例如：链接，按钮
13.5-内存和性能
Tip：js 中，页面中的事件数量会直接影响到页面性能
1. 利用事件委托，减少事件数量
原理：利用事件冒泡，点击子元素也会触发父元素的事件，从而减少事件的数量
适合事件：click、mousedown、mouseup、keydown、keyup 和 keypress。
不适用事件： mouseover 和 mouseout 。
虽然 mouseover 和 mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素 的位置。
（因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发 mouseout 事件。）
虽然 mouseover 和 mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素 的位置。
（因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发 mouseout 事件。）
2. 移除事件处理程序
1. removeChild()、replaceChild()、innerHTML 等移除替换 DOM 时，js 事件无法回收
2. 解决方法
1. 将事件初始化为 null
在 IE8 上有问题，空事件会一直累积，重新进入页面，
会加载先前的空事件。
会加载先前的空事件。
2. 用 removeEventListener 移除事件
13.6-模拟事件
待补充
14-表单
14.1-表单基础知识
1. 表单的独有属性
1. acceptCharset：服务器能处理的字符集；等价于 HTML 中的 accept-charset 特性
2. action： 请求 URL；等价于 HTML 中的 action 特性
3. elements：表单中所有控制集合
4. enctype：请求的编码类型；等价于 HTML 中的 enctype 特性
5. length：表单中控件的数量
6. method： 提交表单的方式
7. name：表单的属性名
8. reset()：表单的重置事件
9. submit()：提交表单事件
10. target：与 a 标签的 target 类似
14.2-文本框脚本
14.3-选择框脚本
14.4-表单序列化
14.5-富文本编辑
未完待续
收藏
0 条评论
下一页
