javascript

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>

<title>我的第一个JavaScript程序</title>

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>

<pre>

</pre>

</body>

</html>

事件概念和事件监听

事件的概念

JavaScript使我们有能力创建动态页面，网页中的每个元素都可以产生某些可以出发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。

事件流

事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、chrome等两者都支持。

使用返回值改变HTML元素的默认行为

HTML元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件中加上return false来阻止它的默认行为。

通用性的事件监听方法

1.绑定HTML元素属性

2.绑定DOM对象属性

Document.getElementById(“btn1”).onClick=test;//test函数名

例：

<!doctype html>

<html>

<head>

<title>通用性的事件监听方法</title>

</head>

<body>

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>

<title>IE中的事件监听方法(attachEvent在IE11不支持)</title>

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>

</body>

</html>

例：标准DOM中的事件监听方法

<!doctype html>

<html>

<head>

<title>标准DOM中的事件监听方法</title>

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>

</body>

</html>

例：冒泡型事件流

<!doctype html>

<html>

<head>

<title>冒泡型事件流</title>

function show(sText){

var oDiv=document.getElementById("display");

oDiv.innerHTML+=sText;

}

</script>

</head>

<p onClick="show('p<br>');">click me</p>

</div>

</body>

</html>

例：标准DOM中的事件监听捕获型事件流

<!doctype html>

<html>

<head>

<title>标准DOM中的事件监听捕获型事件流</title>

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>

<p id="mp">click me</p>

</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方法。