BOM模型中常用对象
BOM-JavaScript是运行在浏览器中的，所以提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator和screen等。通常称为浏览器对象模型（Brower Object Model）
Window对象是整个JavaScript脚本运行的顶层对象，它的常用属性如下：
|
document |
返回该窗口内装载的HTML文档 |
|
location |
返回该窗口装载的HTML文档的URL |
|
navigator |
返回浏览当前页面的浏览器，包含了一系列的浏览器属性，包括名称、版本号和平台等。 |
|
screen |
返回当前浏览者屏幕对象 |
|
history |
返回该浏览窗口的历史 |
提示：这些属性都是属于window对象的子对象，每个子对象内部也提供了各自的属性和方法来进行对浏览器的操作。
window对象的常用方法：
|
alert()、confirm()、prompt() |
分别用于弹出警告窗口、确认对话框和提示输入对话框。 |
|
close() |
关闭窗口 |
|
moveBy()、moveTo() |
移动窗口（在谷歌浏览器不兼容） |
|
resizeBy()、resizeTo() |
重设窗口大小（在谷歌浏览器不兼容） |
|
scrollBy()、scrollTo() |
滚动当前窗口的HTML文档 |
|
open() |
打开一个新的浏览器窗口加载新的URL所指向的地址，并可指定一系列新的属性，包括隐藏菜单等。 |
|
setInterval()、clearInteral() |
设置、删除定时器 |
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>我的第一个JavaScript程序</title> <script type="text/javascript"> function textconfirm(){ var anwser=window.confirm("是否退出"); if(anwser){ //window.alert("拜拜"); window.close(); }else{ window.alert(":-)"); } } function textprompt(){ var res=window.prompt("请输入密码","123"); alert(res); } function textmoveBy(){ window.moveBy(50,50);//让浏览器往右移50，往下移50 } function textmoveTo(){ window.moveTo(250,250);//让浏览器一下移到250，250 } function textresizeBy(){ window.resizeBy(50,50);//浏览器宽加50，高加50 } function textresizeTo(){ window.resizeTo(350,350);//让浏览器宽350，高350 } function textscrollBy(){ window.scrollBy(50,50);//水平方向滚50，垂直滚50 } function textscrollTo(){ window.scrollTo(150,150);//直接滚到150，150 } function textopen(){ window.open("https://www.baidu.com/","baidu","left=20,top=50,width=300,height=500,location=no,toolbar=no,status=no,resizable=no"); } var count=0; function showTime(){ var d=new Date(); var hour=d.getHours(); if(hour<10){ hour="0"+hour; } var minutes=d.getMinutes(); if(minutes<10){ minutes="0"+minutes; } var seconds=d.getSeconds(); if(seconds<10){ seconds="0"+seconds; } count++; //当调用10次时，删除定时器，也就不会继续调用showTime()方法 if(count==10) { window.clearInterval(t); } document.getElementById("display").innerHTML=hour+":"+minutes+":"+seconds; } //设置定时器 var t=window.setInterval("showTime()",1000);//每一秒钟调用一次showTime()方法 </script> </head> <body> <input type="button" value="confirm" onClick="textconfirm()"> <input type="button" value="prompt" onClick="textprompt()"> <input type="button" value="moveBy" onClick="textmoveBy()"> <input type="button" value="moveTo" onClick="textmoveTo()"> <input type="button" value="resizeBy" onClick="textresizeBy()"> <input type="button" value="resizeTo" onClick="textresizeTo()"> <input type="button" value="scrollBy" onClick="textscrollBy()"> <input type="button" value="scrollTo" onClick="textscrollTo()"> <input type="button" value="open" onClick="textopen()"> <div id="display"></div> <pre>
</pre> </body> </html> |
事件概念和事件监听
事件的概念
JavaScript使我们有能力创建动态页面，网页中的每个元素都可以产生某些可以出发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。
事件流
事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、chrome等两者都支持。
使用返回值改变HTML元素的默认行为
HTML元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件中加上return false来阻止它的默认行为。
通用性的事件监听方法
1.绑定HTML元素属性
|
<input type="button" value="clickMe" onClick="check(this)"> |
2.绑定DOM对象属性
|
Document.getElementById(“btn1”).onClick=test;//test函数名 |
例：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>通用性的事件监听方法</title> </head> <body> <a href="https://www.baidu.com/" onClick="return false">点击我</a> <input type="button" value="测试1" id="mytest1" onClick="test1()"> <button type="button" id="test2"><b>测试2</b></button><script type="text/javascript"> function test1(){ alert("绑定HTML元素熟属性"); } function test2(){ alert("绑定DOM对象属性"); } document.getElementById("test2").onclick=test2; </script> </body> </html> |
IE中的事件监听方法
[object].attachEvent(“事件类型”,”处理函数”);//添加监听
[object].detachEvent(“事件类型”,”处理函数”);//取消监听
标准DOM中的事件监听方法
[object].addEventListener(“事件类型”,”处理函数”,”冒泡事件或捕获事件”);
[object].removeEventListener(“事件类型”,”处理函数”,”冒泡事件或捕获事件”);
提示：IE监听方法中的事件类型和标准DOM监听方法中的时间类型写法有点相同，前者事件类型“on”开头，比如：“onclick”,“onmousemove”等。而后者不需要去掉“on”，就是“click”，“mousemove”等。
例：IE中的事件监听方法
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>IE中的事件监听方法(attachEvent在IE11不支持)</title> <script type="text/javascript"> function show(){ alert("hello IE"); } window.onload=function(){ document.getElementById("test1").attachEvent("onclick",show); document.getElementById("test2").onclick=function(){ document.getElementById("test1").detachEvent("onclick",show); }; }
</script> </head> <body> <input type="button" value="测试1" id="test1"> <button type="button" id="test2"><b>测试2</b></button> </body> </html> |
例：标准DOM中的事件监听方法
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标准DOM中的事件监听方法</title> <script type="text/javascript"> function show(){ alert("hello chrome"); } window.onload=function(){ var test1=document.getElementById("mytest1"); var test2=document.getElementById("mytest2"); test1.addEventListener("click",show,false); test2.onclick=function(){ test1.removeEventListener("click",show,false); };
} </script> </head> <body> <input type="button" value="测试1" id="mytest1"> <button type="button" id="mytest2"><b>测试2</b></button> </body> </html> |
例：冒泡型事件流
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>冒泡型事件流</title> <script type="text/javascript"> function show(sText){ var oDiv=document.getElementById("display"); oDiv.innerHTML+=sText; } </script> </head> <body onClick="show('body<br>');"> <div onClick="show('div<br>');"> <p onClick="show('p<br>');">click me</p> </div> <div id="display"></div> </body> </html> |
例：标准DOM中的事件监听捕获型事件流
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标准DOM中的事件监听捕获型事件流</title> <script type="text/javascript"> function show(sText){ var oDiv=document.getElementById("display"); oDiv.innerHTML+=sText; } window.onload=function(){ var mybody=document.getElementById("mbody"); var mydiv=document.getElementById("mdiv"); var myp=document.getElementById("mp"); // mybody.addEventListener("click",function(){show('body<br>')},false); // mydiv.addEventListener("click",function(){show('div<br>')},false); // myp.addEventListener("click",function(){show('p<br>')},false); mybody.addEventListener("click",function(){show('body<br>')},true); mydiv.addEventListener("click",function(){show('div<br>')},true); myp.addEventListener("click",function(){show('p<br>')},true); } </script> </head> <body id="mbody"> <div id="mdiv"> <p id="mp">click me</p> </div> <div id="display"></div> </body> </html> |
访问事件对象
事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。
标准DOM中的事件对象
在标准DOM浏览器检测到发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入。
|
//IE中得到事件对象 option.onclick=function(){ var oEvent=window.event; } |
|
//标准DOM中得到事件对象 op.onclick=function(oEvent){ //作为参数传进来 } |
经验之谈：为了兼容不同的浏览器，通常采用下面的方法得到得到事件对象。
|
op.onclick=function(oEvent){ If(window.event){ oEvent=window.event; } } |
Event事件对象常用属性：
|
IE |
标准DOM |
描述 |
|
altKey,shiftKey,ctrlKey |
同IE |
按下alt、shift、ctrl为true，否则为false |
|
cancleBubble |
stopPropagation |
可用来阻止事件冒泡 |
|
button |
同IE |
对应按下鼠标键的值 |
|
clientX,clientY |
同IE |
鼠标指针在客户区域的坐标，不包括工具栏等。 |
|
screenX,screenY |
同IE |
鼠标指针相对于整个计算机屏幕的坐标值 |
|
keyCode |
同IE |
按键的代号 |
|
returnValue |
同IE |
设置false时取消元素的默认事件 |
|
srcElement |
target |
引起事件的元素/对象 |
|
type |
同IE |
事件的名称 |
常见的事件类型：
|
onclick |
单击鼠标左键触发 |
|
ondbclick |
双击鼠标左键触发 |
|
onmousedown |
单击任意一个鼠标按键时触发 |
|
onmouseout |
鼠标指针移出一个元素边界时触发 |
|
onmousemove |
鼠标在某个元素上移动时持续触发 |
|
onmouseup |
松开鼠标任意一个按键时触发 |
|
onmouseover |
鼠标指针移到一个元素上时触发 |
常用的键盘事件：
|
onkeydown |
按下键盘上某个按键时触发，一直按会持续触发 |
|
onkeyup |
释放某个按键时触发 |
|
onkeypress |
按下某个按键并产生字符时触发，忽略shift等功能键 |
HTML事件：
|
onload |
页面完全加载后在window对象上触发 |
|
onunload |
页面完全卸载后再window对象上触发 |
|
onselect |
选择了文本框的一个或多个字符时触发 |
|
onchange |
文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发 |
|
onsubmit |
单击“提交”按钮时在表单form上触发 |
|
onfocus |
任何元素或窗口获得焦点时触发 |
|
onblur |
任何元素或窗口失去焦点时触发 |
提示：载入事件onload是最常用的事件之一，因为在页面载入完成之前，DOM的框架还没有搭建完毕，因此任何相关操作都不能发生。给window对象分配onload、onunload事件等同于<body>元素的onload、onunload方法。