DOM第五天

DOM的键盘事件
1.onkeydown事件(键盘按键被按下)

// onkeydown 某个键盘按键被按下 针对所有键
oText.οnkeydοwn=function(event){
console.log(“onkeydown事件”);
console.log(event);
}
document.οnkeydοwn=function(event){
console.log(event.keyCode);
}
2.onkeyupd事件(键盘按键被松开)

// onkeyup 某个键盘按键被松开。
oText.οnkeyup=function(event){
console.log(“onkeyup事件”);
console.log(event);
}
document.οnkeyup=function(event){
console.log(event.keyCode);
}
3.onkeypress事件(键盘按键被按下并松开)

oText2.οnkeypress=function(event){
console.log(“onkeypress事件”);
console.log(event);
}
onkeypress不识别功能键(上下左右，alt ctrl shift backface)，可以区分大小写

DOM的表单事件
1.oninput 元素获取用户输入时触发

// 输入事件
oForm.οninput=function(event){
console.log(“oninput事件”);
console.log(event);
}
2.onfocus 元素获取到焦点时触发

// 焦点事件
aInput[1].onfocus = function (event) {
console.log(“onfocus事件”);
console.log(event);
this.style.borderColor = “yellow”
}
3.onblur 元素失去焦点时触发

aInput[1].onblur = function (event) {
console.log(“onblur事件”);
console.log(event);
this.style.borderColor = “black”
}
4.onchange 该事件在表单元素的内容改变时触发(,,,)

aInput[4].onchange = function (event) {
console.log(“onchange事件:” + this.value);
console.log(event);
// 发送请求
}

aInput[5].onchange = function (event) {
console.log(“onchange事件:选择了男生”);
console.log(event);
}
aInput[6].onchange = function (event) {
console.log(“onchange事件:选择了女生”);
console.log(event);
}
5.onselect 用户选择文本时触发(,)

aInput[7].onselect = function () {
console.log(“onselect事件”);
console.log(event);
}
6.onsearch 用户向搜索域输入文本时触发() 按下回车或点击×时

aInput[8].onsearch = function () {
console.log(“onsearch事件”);
console.log(event);
}

DOM的剪贴板事件
1.oncopy 当用户拷贝元素内容时触发

// 针对文档中所有的内容
document.οncοpy=function(e){
console.log(“oncopy事件”);
console.log(e);
}
2.oncut 当用户剪切元素的内容时触发

oHeader.oncut=function(e){
console.log(“oncut事件”);
console.log(e);
// alert(“请登录”);
}
3.onpaste 当用户粘贴内容到元素时触发

document.getElementsByTagName(“input”)[0].οnpaste=function(e){
console.log(“onpaste事件”);
console.log(e);
}
4.onselectstart 当用户选中元素内容时触发

oText.onselectstart=function(e){
console.log(“onselectstart事件”);
console.log(e);
}

DOM的拖拽事件
1.ondrag 当元素正在拖拽时触发

oImage.οndrag=function(e){
console.log(“图片正在拖拽”);
console.log(e)
}
2.ondragstart 当元素开始拖拽时触发

oImage.οndragstart=function(e){
console.log(“图片开始拖拽”);
console.log(e)
}
3.ondragend 当元素结束拖拽时触发

oImage.οndragend=function(e){
console.log(“图片拖拽结束”);
console.log(e)
}
DOM的打印事件

onbeforeprint 在页面即将开始打印时触发

// 当前文档进行打印
document.οnbefοreprint=function(e){
console.log(“页面即将进行打印”);
console.log(e)
}

DOM的框架事件
==1.onabort 图像的加载被中断。 ( ) ==
====2.onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发 ==
3.onerror 在加载文档或图像时发生错误。 ( , 和 ) ==
4.onhashchange 该事件在当前 URL 的锚部分发生修改时触发。 URL(统一资源定位符)

window.οnhashchange=function(e){
console.log(“锚点发生了变化”);
console.log(e)
}
5.onload 一张页面或一幅图像完成加载

window.οnlοad=function(e){
console.log(“窗口文档加载完成”);//所有的内容加载完成 包括图片 视频等资源
console.log(e)
}
oImage.οnlοad=function(e){
console.log(“图片加载完成”);
console.log(e)
}
==6.onunload 用户退出页面。 ( 和 )

7.onready 当文档准备结束时触发==

// window.onready=function(e){
console.log(“窗口文档加载完成”);//只是文档结构 资源等可能没有加载完成
}
==8.onpageshow 该事件在用户访问页面时触发

window.οnpageshοw=function(e){
console.log(“正在访问当前窗口”);
console.log(e)
}
9.onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发

window.οnpagehide=function(e){
console.log(“离开当前窗口”);
console.log(e)
}
10.onresize 窗口或框架被重新调整大小

window.οnresize=function(e){
console.log(“改变窗口大小”);
console.log(e)
}
11.onscroll 当文档被滚动时发生的事件

window.οnscrοll=function(e){
console.log(“窗口发生滚动”);
console.log(e)
}
12.ononline 该事件在浏览器开始在线工作时触发

window.οnοnline=function(e){
console.log(“浏览器开始在线工作”);
console.log(e)
}
13.onoffline 该事件在浏览器开始离线工作时触发

window.οnοffline=function(e){
console.log(“浏览器开始离线工作”);
console.log(e)
}
DOM的媒体事件

onabort 事件在视频/音频（audio/video）终止加载时触发
oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发
oVideo.οncanplay=function(){
console.log(“视频缓冲完成”)
}
oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发
ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发
onemptied 当期播放列表为空时触发
onended 事件在视频/音频（audio/video）播放结束时触发
oVideo.οnended=function(){
console.log(“视频播放结束”);
}
onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发
onloadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发
onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发
onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发
onpause 事件在视频/音频（audio/video）暂停时触发
oVideo.οnpause=function(){
console.log(“视频暂停播放”);
alert(“广告”)
}
onplay 事件在视频/音频（audio/video）开始播放时触发
onplaying 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发
onratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发
onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发
onseeking 事件在用户开始重新定位视频/音频（audio/video）时触发
onstalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发
onsuspend 事件在浏览器读取媒体数据中止时触发
ontimeupdate 事件在当前的播放位置发送改变时触发
onvolumechange 事件在音量发生改变时触发
onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发

DOM的事件对象（键盘）
altKey 返回当事件被触发时,"ALT"是否被按下。
ctrlKey 返回当事件被触发时,"CTRL"是否被按下。
shiftKey 返回当事件被触发时,"SHIFT"是否被按下。
metaKey 返回当事件被触发时,"MATE"是否被按下（Mac系统）。
code 返回键盘的编码
key 返回按键的标识符
keyCode 返回按键的字符代码 针对IE8以下的浏览器
which 返回按键的字符代码
target 返回事件作用的目标元素
bubbles 是否具有冒泡属性
cancelBubble 是否取消冒泡
type 返回事件类型

鼠标事件中不同坐标的区别
clientX,clientY: 返回鼠标指针的坐标(可视区域)
pageX,pageY:返回鼠标指针的坐标(整个网页)
screenX,screenY:返回鼠标指针的坐标(整个屏幕区域)
offsetX,offsetY:返回鼠标指针的坐标(触发事件的元素)