第十三章 事件
2015-08-05 23:15:33 6 举报AI智能生成
登录查看完整内容
在第十三章中，一场突如其来的事件打破了原本平静的生活。一场大火在夜幕下熊熊燃烧，将整个小镇笼罩在浓烟和火光之中。人们惊慌失措，四处奔逃，尖叫声、哭喊声此起彼伏。消防员们冒着生命危险，奋力扑灭火源，而警察们则在现场维持秩序，确保无人受伤。这场火灾的原因尚未查明，但无疑给小镇带来了巨大的损失。居民们团结一心，互相帮助，共同面对这场灾难。尽管生活受到了严重影响，但他们的决心和勇气让人们看到了希望的曙光。
作者其他创作
大纲/内容
事件
事件流
事件捕获阶段
由最不具体的节点最早接收到事件
处于目标阶段
被看成是事件冒泡的一部分
事件冒泡阶段
事件由最具体的元素接收，逐级向上传播到较为不具体的节点
事件处理程序
概念
事件是用户或浏览器自身执行的某种动作
响应某个事件的函数叫事件处理程序，其名字以'on'开头
HTML事件处理程序
用HTML特性来指定事件
缺点
事件在触发之前还不具备执行条件，可用try-catch块捕获错误
在不同的浏览器中会出现不同的结果
HTML代码和JS紧密耦合，不便于事件处理程序的更换
DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性
事件处理程序是在元素的作用域中运行，程序中的this指向当前元素
删除事件处理程序：btn.onclick=null
DOM2级事件处理程序
方法
addEventListener()
指定事件处理程序
removeEventListener()
删除事件处理程序
方法的参数：事件名、事件处理程序函数和一个布尔值(true:捕获/false:冒泡)
注：一般将事件处理程序添加到事件流的冒泡阶段，提高浏览器的兼容性
IE事件处理程序
attachEvent()
detachEvent()
方法的参数：\"on\"+事件名、事件处理程序函数
注：IE8级之前版本只支持事件冒泡
跨浏览器事件处理程序
在EventUtil对象中创建addHandler()、removeHandler()方法
addHandler():视情况分别使用DOM0级、DOM2级、IE方法添加事件
方法的参数：操作的元素、事件名和事件处理程序函数
removeHandler():移除之前添加的事件处理程序
区别
DOM0**
每个事件只支持一个事件处理程序
DOM2**
可为一个元素添加多个事件处理程序，以添加顺序触发
IE**
事件处理程序在全局作用域中运行，this指向window
可为一个元素添加多个事件处理程序，但会以相反的顺序被触发
事件对象
DOM**
event
含事件元素、事件类型及其他事件信息
属性/方法
currentTarget
当前正在处理事件的元素，值与this相等
stopPropagation()
取消事件冒泡/捕获
preventDefault()
取消事件默认行为
target
事件的实际目标
type
被触发事件的类型，该属性可使一个函数处理多个事件
eventPhase
DOM0级事件处理程序中，event是window对象的一个属性
cancelBubble
默认值为false；值为true时，取消事件冒泡
returnValue
默认值为true；值为false时，阻止事件的默认行为
srcElement
事件的目标，相当于target
被触发的事件类型
跨浏览器事件对象
事件类型
DOM3级
UI事件
用户与页面上的元素交互时触发
window.load
window.unload
文档被完全卸载后触发；清除引用，避免内存泄露
window.resize
浏览器窗口高度或宽度被改变时触发
window.scroll
设置页面的滚动位置
焦点事件
在页面元素获得或失去焦点时触发
blur
失去焦点时触发，不冒泡，无兼容性
focus
获得焦点时触发，不冒泡，无兼容性
focusout
失去焦点时触发，冒泡，有兼容性
focusin
获得焦点时触发，冒泡，有兼容性
鼠标和滚轮事件
click
鼠标单击或按回车键时触发
dbclick
鼠标双击时触发
mousedown
按下任意鼠标按钮触发
mouseenter
mouseleave
从元素范围内移出后触发，不触发后代元素，不冒泡
mousemove
鼠标在元素内部移动时重复触发
mouseout
鼠标从一个元素上移入另一个元素时触发
mouseover
鼠标从一个元素外首次移入另一个元素边界内时触发
mouseup
用户释放鼠标按钮时触发
滚轮事件
页面没有滚动的情况下，pageX和pageY的值与clientX和clientY的值相等
修改键
按下鼠标时键盘上的某些键的状态可以影响到要采取的操作
含：Shift、Ctrl、Alt、Meta
表示修改键状态的属性：shiftKey、ctrlKey、altKey、metaKey
鼠标滚轮事件
mousewheel
通过鼠标滚轮与页面进行交互时，会触发该事件
wheelDelta属性
滚轮向前滚动，属性值是120的倍数
滚轮向后滚动，属性值是-120的倍数
DOMMouseScroll
Firefox支持，鼠标滚轮滚动时触发，会冒泡到window对象
detail属性
滚轮向前滚动，属性的值是-3的倍数
滚轮向后滚动，属性的值是3的倍数
键盘与文本事件
keydown
按下键盘上任意键时触发，按住不放会反复触发该事件
keypress
按下键盘上任意字符键时触发，按住不放会反复触发该事件
keyup
释放键盘上的键时触发
文本事件：textInput
在文本插入文本框之前触发
HTML5事件
contextmenu
表示何时应该显示上下文菜单
beforeunload
弹出对话框，询问用户是否要关闭页面还是留在当前页面
event.returnValue的值设置为提示信息
DOMContentLoaded
在形成完整的DOM树之后就触发，不用等图片、js、css文件等资源下载完
对不支持该事件的浏览器，可设置一个事件为0毫秒的超时调用
readystatechange
提供与文档或元素的加载状态有关的信息
readyState属性
uniniteialized(未初始化)
对象存在但尚未初始化
loading(正在加载)
对象正在加载数据
loaded(加载完毕)
对象加载数据完成
interactive(交互)
可以操作对象，但还未完全加载
complete(完成)
对象已经加载完毕
pageshow和pagehide
firefox和opera有一个\"往返缓存\
pageshow对象有一个persisted属性，若页面被保存在bfcache中，则属性值为真，反之为假
hashchange
便于在URL的参数列表发生变化时通知开发人员，其事件处理程序需添加给window
可使用location.hash确定当前的参数列表
设备事件
orientationchange
便于开发人员确定用户何时将设备由横向查看模式切换为纵向查看模式
移动Safari的window.orientation属性含3个值
0：表示肖像模式
90：表示向左旋转的横向模式
-90：表示向右旋转的横向模式
MozOrientation
当设备的加速计检测到设备方向改变时，会window上触发该事件
deviceorientation
当设备的加速计检测到设备方向改变时，会在window上触发该事件
可以告诉开发人员设备在空间中朝向哪，而不是如何移动
devicemotion
检测设备什么时候移动，包含方向改变、是否在往下掉，是否被走着的人拿在手里等
属性
acceleration
accelerationIncludingGravity
考虑z轴重力加速度的情况下，表示每个方向上的加速度
interval
以毫秒表示的时间值
rotationRate
触摸与手势事件
触摸事件
touchstart
当手指触摸屏幕时触发
touchmove
当手指在屏幕上滑动时连续触发
touchend
当手指从屏幕上移开时触发
touchcancel
当系统停止跟踪触摸时触发
跟踪触摸属性
touches
表示当前跟踪触摸操作的Touch对象的数组
targetTouchs
特定于事件目标的Touch对象的数组
changeTouches
自上次触摸以来发生什么后改变的Touch对象的数组
Touch对象包含的属性
clientX
clientY
identifier
标识触摸的唯一ID
pageX
pageY
screenX
screenY
触摸的DOM节点目标
手势事件
gesturestart
当一个手指已按在屏幕上，另一个手指触摸屏幕时触发
gesturechange
当触摸屏幕的任何一个手指的位置改变时触发
gestureend
当任何一个手指移开屏幕时触发
rotation
手指变化引起的旋转角度，负值为逆时针，正值为顺时针
scale
两个手指间距离的变化情况，值从1开始，随着距离的改变而改变
内存和性能
性能差的原因
对象会占用内存，内存中对象越多性能越差
指定所有事件处理程序导致的DOM访问次数，会延迟整个页面的交互就绪时间
提升性能方法
事件委托
利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
适合采用事件委托的事件
子主题
分支主题 5
0 条评论
回复 删除
下一页
