接上次看JS的事件冒泡和捕获,所以顺带就把事件
相关的知识都看完好了
而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享
事件对象
事件处理程序函数在处理事件时,或者说DOM
在触发某个事件的时候,会产生一个包含事件相关信息的event
事件对象
对于不同浏览器环境,这个event
事件对象有一些差距
-
DOM中的事件对象
不管是
DOM0
级还是DOM2
级兼容
DOM
的浏览器会将一个event
对象传入事件处理程序中常用的
event
对象的一些属性-
type
:表示事件的类型具体用法:可以通过
type
区分,在同一个事件处理函数实现多个事件的处理,减少事件监听,优化性能 -
currentTarget
:事件处理程序当前正在处理这个事件的元素 -
target
: 表示实际触发事件的DOM元素,实际目标可以这么理解,
body
下面的div
被点击,冒泡到body
,在body
上绑定了一个click
事件,这个时候触发这个body
的点击事件,但是这个时候的target
实际上是div
那么在事件处理程序中,还有一个
this
属性,还有一个currentTarget
:永远指向正在处理这个事件的元素,那么上一个例子中实际上是body
在处理这个事件,所以currentTarget
是指向body
的而 事件处理程序中的
this
指向,是一直指向currentTarget
表示正在执行和处理事件的这个元素所以,在事件没有冒泡的情况下,这三者是可以为同一个值,但是如果是在冒泡阶段事件被处理的话,则这个
target
可能不等于其他两个值 -
preventDefault
阻止默认行为,是一个函数用法:在需要阻止默认行为的事件处理函数中,使用
event.preventDefault()
,取消默认事件,比如默认点击a
标签会跳转指定链接等等注意: 只有
event.cancleable
属性为true
的事件类型,才可以使用preventDefault
-
stopPropagation
阻止事件冒泡和捕获,也是一个函数- 这个用的比较常见,阻止事件冒泡和捕获,只要这个事件被处理,不会顺着事件流往捕获方向或者冒泡方向传递
-
eventPhase
获取事件当前正处于事件流的哪个阶段- 事件流三个阶段: 捕获阶段,冒泡阶段,处于目标阶段
- 事件处理程序中的
event.eventPhase
分别对应值:1,3,2
-
上述
event
属性和方法,尽在事件处理程序执行期间存在,事件处理程序一旦执行完毕,会立即销毁
-
-
IE中的事件对象
IE中的
event
对象跟DOM
中的事件对象有一定的差别,最重要的就是IE
中的事件对象,如果是使用DOM0
级的方法添加事件处理程序是,event
对象会挂载到window
下面?window?window?是的没错,获取事件对象的时候,是通过window.event
来拿到事件对象,如果使用html
指定事件处理程序或者是DOM2
级都都不会有这个问题,和DOM
级别类似,会有一个event
对象传入到事件处理程序但是
IE
中的事件对象,对应的属性名和方法名跟DOM
中事件对象的名字有很大不一样cancelBubble == stopPropagation
阻止事件冒泡,但是不是个方法是一个属性returnValue == preventDefault
阻止默认事件,但是不是个方法,是一个属性srcElement == target
实际触发目标type == type
用来区分事件类型,这个没有区别
要记住的还是,如果在
IE
环境下,使用DOM0
级指定事件处理程序的话,获取event
对象需要从window.event
这样获取例如:
var btn= document.getElementById('test') // DOM0级指定 btn.onclick=function(){ alert(window.event.target.srcElement === this) //true } // DOM2级 btn.addEventListener('click',function(event){ alert(event.srcElment === this) //true })
还有就是
IE
环境下阻止事件冒泡和默认处理程序都是属性,不是方法,只需要把对应的属性设置为false
例如:
var link = document..getElementById('test') link.onclick = function(){ window.event.returnValue = false; //阻止默认事件 }
IE
中的cancleBuble只是取消冒泡,因为IE环境不支持事件捕获,哈哈哈哈然后就是完善一下之前的
EventUtil
,实现跨浏览器的获取事件对象,还有阻止冒泡和默认事件处理程序,代码如下getTarget(event){ return event || window.event //IE环境下可能是WINDOW.event }, preventDefault(event){ if(event.preventDefault){ event.preventDefault() }else{ event.returnValue = false // IE环境下没有preventDefault,是通过设置returnValue取消默认 } }, stopPropagation(event){ if(event.stopPropagation){ event.stopPropagation() }else{ event.cancelBuble = false } }
事件类型
DOM3级完善了事件类型,用来区分事件类型的不同信息,类似:鼠标事件,焦点事件,键盘事件,文本时间,滚轮事件等等
-
UI事件
指的是那些不一定与用户操作有管的事件,包括一些DOM和元素的交互时间,例如
load
事件unload
事件-
load
事件- 最常用的事件,
- 触发对象:
window
, - 触发时间:页面完全加载后(包括所有图像,JS文件,CSS等外部资源)
- 如何捕获:
DOM2
级写法:监听window
对象,例如window.addEventListener('load',function(){})
HTML
级写法,由于HTML
写法无法拿到window
对象,所以会直接写在body
上面,一般来说,在window
上发生的任何事件都可以在body
元素上通过对应的特性来指定,所有的浏览器都能很好地支持这种方式,但是任然推荐使用DOM0
或DOM2
等javascript
的方法来绑定window
对象的时间按处理程序img,script,link,video
等标签也有load
事件
-
unload
事件- 一般用来:在这个事件清除引用,清理内存
- 触发对象:
window
- 触发时间:文档被完全卸载之后触发,此时可能一些对象和变量已经被卸载,注意引用关系
-
resize
事件- 区别:在
DOM
浏览器和IE
环境有区别,event.target
属性的实际触发对象不一样,在DOM
浏览器中,这个属性指向document
,但是在IE
环境中,这个值没有指定 - 兼容性:在
firefox
浏览器,resize
的过程不会持续触发这个事件,只在开始和结束,两个触发,而在其他浏览器,在拖拽的过程中是会一直触发这个事件 - 触发对象:
window
- 触发事件:窗口大小发生
1px
的改变时候,最大最小化窗口的时候 - 如何捕获:参考
load
事件,可以用window
对象捕获,也可以用body
标签捕获
- 区别:在
-
scroll
事件- 触发对象:
window
- 捕获方式: 和
load
方法类似 - 注意:根据
document.compatMode
渲染模式,有不同的表现,在compatMode==='CSS1Copat'
标准模式时,除了Safari
浏览器,所有的都会通过html
这个元素反应这个变化,而在混杂模式时,是通过body
元素的scrollLeft
和scrollTop
来获取这个具体的bian’hua数值,而现在基本上混杂模式和标准模式已经混合了,区分没有这么详细
- 触发对象:
-
-
焦点事件
在页面元素失去或者获得焦点的时候触发,可以用来知晓用户在页面上的行踪
主要用的比较多的是
focus
,blur
,这两个事件表示,元素获得焦点和失去焦点,不会冒泡focusin,focusout
用来表示焦点进入和焦点失去事件,**这两个事件会冒泡虽然上述常用事件有的不会冒泡什么,但是,仍然会走捕获阶段,所以仍然可以通过捕获阶段进行一些外级操作,当然是浏览器支持捕获阶段
触发元素:所有元素都可触发
捕获方式:
DOM0
级,DOM2
级,或者HTML
方法均可捕获,IE
浏览器环境方式也可以 -
鼠标与滚轮事件
鼠标和滚轮事件也是在
DOM3
级事件中定义的,主要有,单击,点击,双击,鼠标移入,鼠标移出,等除了鼠标移入
mouseenter
和鼠标移除mouseleave
所有的鼠标事件都会冒泡,也是可以取消的,而取消鼠标事件将会影响浏览器的默认行为,取消鼠标事件的默认行为还会影响其他事件,因为鼠标事件可能和其他事件是有联系的一个
click
事件,前面包括了一个鼠标按下mousedown
和鼠标放开两个事件mouseup
,也就是触发click
事件前会先触发前两个事件同理,双击事件
doubleclick
事件包括两个click
事件,前面又有两个mouseup
和mousedown
事件主要用处
- 客户区坐标位置
event.clientX
和event.clientY
- 鼠标事件,相对于浏览器视口的位置
- 页面坐标位置
event.pageX
和event.pageY
- 鼠标事件,相对于页面的位置
- IE8及更早版本不支持这两个属性,但是也可以通过鼠标相对于视口位置+页面滚动属性算出=鼠标相对于页面的位置
- 屏幕坐标位置
event.screenX
和event.screenY
- 鼠标事件,相对于整个屏幕的位置
- 修改键/点击鼠标时同时按下了多功能键(
ctrl
,alt
等)- 对应的键,直接在点击事件的对应属性上面
- 例如:
shift
键 就在event.shiftKey
这个属性上
- 相关元素
- 鼠标移入移出的来源元素和目标元素
- 获取方式:
event.relatedTarget
- 分别在
mouseout
和mouseenter
时表示 目标获取光标元素和目标失去光标元素 - 在
IE8
之前的没有这个属性,但是分别有两个fromElment
和toElement
用来获取这两个相关元素
- 鼠标按钮
- 鼠标事件(例如点击事件时,点击的是哪个按钮,左键,中键,右键等)
- 属性名:
button
- 属性含义:
0 : 左键按下,1:中键按下,2:右键按下
IE8
及更早版本浏览器也有这个属性,但是对应值有比较大的区别,区分的更为细致
- 更多事件信息
- 属性名:
detail
- 表示鼠标点击次数
- 属性名:
- 鼠标滚轮事件
- 我真是没想到支持的这么详细,hhh
- 触摸设备
- 这个还和后面的触摸事件有一定的区别
- 这个表示鼠标事件在一些移动设备中的区别表现
- 例如:
- 在移动设备中不支持
dblclick
事件,双击会放大画面,而且不能改变该行为 - 轻击可点击单元会触发
mousemove
事件,如果此事件会导致内容变化,将不再发生其他事件,如果不会触发任何事件,那么依次会发生mousedown,mouseup,click
事件,可点击单元表示一些会产生默认操作的元素:比如a
标签
- 无障碍性问题
- 鼠标设备事件需要针对无障碍性考虑更多易用性和点击操作逻辑
- 客户区坐标位置
-
键盘与文本事件
主要是一些键盘输入和文本键入的事件,是说
DOM2
级事件最初规定了键盘事件,但是后来删掉了,所以目前主要支持的还是DOM0级
事件和DOM3
级事件,但是DOM3
级事件暂时没有特别完善主要事件
keydown
,keypress
,keyup
,理论上所有的元素都支持这三个事件,但是实际上只有文本输入框支持最多触发顺序
keydown,keypress,keyup
,并且keydown
和keypress
都是在文本框发生变化之前触发,而keyup
事件则是在文本框已经变化之后触发,如果用户一直按住一个字符不放,则会一直触发keydown
和keypress
事件还有一个新增的文本事件
textInput
,实际上是对keypress
的补充,用意是将文本显示给用户之前更加容易拦截文本,在文本插入文本框之前会触发textInput
事件常用键盘事件属性
- 键码
keyCode
- 触发时间:
keydown
和keyup
时,event对象会有一个keyCode
属性 - 表示:按下按键的对应的小写字母或数字对应的ASCII码相同
- 触发时间:
- 字符编码
charCode
- 触发时间:
keypress
事件触发时 - 使用方式: 首先检查
charCode
是否可用,如果有的话则表示的是 按下键对应字符的ASCII码,而IE8
及更早版本,则是在keyCode
表示字符对应的ASCII码 - 所以:字符对应的ASCII码不一定在
charCode
,在IE8
及老旧浏览器也可能在keyCode
- 用法:如果
charCode
可用的话,可以通过字符串类方法String.fromCharCode
转化为实际的字符
- 触发时间:
- DOM3级新增了
char
和key
- 同时整合了
charCode
和keyCode
key
:表示对应的文本字符,包括大小写,就是实际的键入字符char
:表现形式在按下字符时表现和key
一致,但是对于非字符时,char
为null
- 新增了
location
属性,表示按下了键盘什么位置的同一个按键,例如键盘左边的shift
和右边的shift
- 同时整合了
- textInput事件
- 新增的文本输入事件,只在可编辑区域触发,主要用域监听文本的变化,新增data属性,表示修改实际文本
- 新增属性:
inputMethod
,用来区分输入方式,是复制进来的,还是拖放进来的,还是手写输入,语音输入等
DOM3级的键盘输入事件很美好,但是不知道实际支持情况,而且还要做兼容,之前遇到一个
number
类型的input
输入框,就累个够呛,候选字等,输入法越做越优秀,事件越来越复杂- 设备中的其他按键事件
- 例如一些手柄的事件,加号,减号等,暂时没用到
- 键码
-
复合事件
是
DOM3
级新增的一类事件,用域处理IME
的输入序列,暂时没接触,也是一类多功能输入事件吧 -
变动事件
是
DOM2
级的变动事件表示:DOM中某一部分发生变化时给出提示,变动事件是为
XML
或者HTML DOM
设计的,并不特定于某种语言。主要有:
- 节点移除
- 节点插入
- 删除节点等
-
HTML5事件
-
contextmenu
上下文菜单事件- 意义:通过鼠标右键,调出上下文菜单,鼠标右键显示事件
- 触发元素:所有元素,
- 是否冒泡:会冒泡
- 注意:首先需要阻止默认事件处理程序,然后重新写事件处理程序,有可能影响浏览器默认行文
-
beforeunload
事件- 意义:页面卸载之前用来挽留页面
- 触发元素:
window
对象
-
DOMContentLoaded
事件- 意义:
DOM
树完整形成之后触发 - 触发元素:
window
对象
- 意义:
-
readystatechange
事件- 意义:元素加载状态发生变化时
- 触发元素:部分媒体元素,
script
标签等 - 每个对象都有一个
readystate
的状态属性,会有以下状态(但不是所有状态都会正常变化)uninitialized
未初始化状态loading
正在加载loaded
加载完毕interactive
可以操作对象complete
完成
- 但是不是所有对象都有这些完整的阶段,可能会跳过
-
pagehide
和pageshow
事件- 意义:从内存中取出/进入视野时触发,不会触发
load
事件,不会重新加载页面,只是从页面回显 - 一般发生在:前进/后退按钮点击的时候
- 相关属性
event.persisted
是否被缓存在bfcache
中 - 触发元素:
window
。。。太多了,还有好多事件类型,回头再填坑了,记录不下去了
- 意义:从内存中取出/进入视野时触发,不会触发
-