JavaScript事件流

JavaScriptBOM操作整理

事件流

事件捕获阶段 处于目标阶段 事件冒泡阶段

事件冒泡

事件开始时由最具体的元素接收，然后逐级递增传播到不具体的结点（文档）
注意IE8及以下

var box=document.getElementById('box');
box.onclick=function(){
  box.innerHTML='box '
}
document.body.onclick=function(){
   box.innerHTML='body '
}
document.documentElementonclick=function(){
   box.innerHTML='html '
}
ducument.onclick=function(){
   box.innerHTML='document '
}
window.onclick=function(){
   box.innerHTML='Window '
}
输出 box body html document window

事件捕获

由不太具体的结点更早的接收事件具体的结点最后接收事件
事件捕获 true 事件冒泡false

var box=document.getElementById('box');
box.addEventListener('click',functiom(){
  box.innerHTML+='box'
},true);

document.body.addEventListener('click',functiom(){
  box.innerHTML+='body'
},true);
document.documentElement.addEventListener('click',functiom(){
  box.innerHTML+='html'
},true);
ducument.addEventListener('click',functiom(){
  box.innerHTML+='document'
},true);
window..addEventListener('click',functiom(){
  box.innerHTML+='window'
},true);

输出 window document html body box

事件处理程序

1.HTML事件处理程序

缺点：html+js无分离 后期不容易维护

<div style='width:200px;height:200px;background:red' onclick='this.innerHTML+="1"'></div>

2.DOM0级事件处理程序

<div id='box' style='width:200px;height:200px;background:red'></div>
var box=document.getElementById('box');
优点：简单 有跨浏览器优势
box.onclick=function(){

}
删除事件处理程序
box.onclick=null;
缺点不能给同一个元素绑定相同的事件处理程序，如果绑定了会有覆盖

3.DOM2级事件处理程序

addEventListener removeEventListener
IE8浏览器不支持DOM2级处理程序

<div id='box' style='width:200px;height:200px;background:red'></div>
var box=document.getElementById('box');
box.addEventListener('click',functiom(){
  box.innerHTML+='box1'
},false);
box.addEventListener('click',functiom(){
  box.innerHTML+='box2'
},false);
输出 box1box2

优点 没有事件覆盖现象

无效的移除事件
box.addEventListener('click',functiom(){
  box.innerHTML+='box1'
},false);


box.removeEventListener('click',functiom(){
  box.innerHTML+='box1'
},false);


正确移除事件
function hander(){
  this.innerHTML+=1;
}
box.addEventListener('click',handle,false);
box.removeEventListener('click',handle,false);



删除事件处理程序
box.onclick=null;
缺点不能给同一个元素绑定相同的事件处理程序，如果绑定了会有覆盖

4.iE事件处理程序

attachEvent() detachEvent()
缺点：不支持其他浏览器只支持IE10以下

<div id='box' style='width:200px;height:200px;background:red'></div>
var box=document.getElementById('box');


box.addattachEvevnt('onclick',function(){
  IE中this指向window 
  box.innerHTML+=1
})
box.addattachEvevnt('onclick',function(){
  IE中this指向window 
  box.innerHTML+=2
})
IE9 输出1 2
IE8 输出2 1

2、document对象

document对象：实际上是window对象的属性，document == window.document为true，是唯一一个既属于BOM又属于DOM的对象  

document.lastModified  //获取最后一次修改页面的日期的字符串表示  

document.referrer  //用于跟踪用户从哪里链接过来的  

document.title  //获取当前页面的标题，可读写  

document.URL  //获取当前页面的URL，可读写  

document.anchors[0]或document.anchors["anchName"] //访问页面中所有的锚  

document.forms[0]或document.forms["formName"]  //访问页面中所有的表单  

document.images[0]或document.images["imgName"]  // 访问页面中所有的图像  

document.links [0]或document.links["linkName"]  //访问页面中所有的链接 

document.applets [0]或document.applets["appletName"]  //访问页面中所有的Applet  

document.embeds [0]或document.embeds["embedName"]  //访问页面中所有的嵌入式对象  

document.write(); 或document.writeln();  //将字符串插入到调用它们的位置  

3、location对象

location对象：表示载入窗口的URL，也可用window.location引用它  

location.href  //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm  

location.portocol  //URL中使用的协议，即双斜杠之前的部分，如http 

location.host  //服务器的名字，如www.wrox.com  

location.hostname  //通常等于host，有时会省略前面的www  

location.port  //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080 

location.pathname  //URL中主机名后的部分，如/pictures/index.htm  

location.search  //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx  

location.hash  //如果URL包含#，返回该符号之后的内容，如#anchor1  

location.assign("http:www.baidu.com");  //同location.href，新地址都会被加到浏览器的历史栈中  

location.replace("http:www.baidu.com");  //同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问  

location.reload(true | false);  //重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false  

4、navigator对象

`navigator`对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可用window.navigator引用它  

`navigator.appCodeName`  //浏览器代码名的字符串表示  

navigator.appName  //官方浏览器名的字符串表示  

navigator.appVersion  //浏览器版本信息的字符串表示  

navigator.cookieEnabled  //如果启用cookie返回true，否则返回false  

navigator.javaEnabled  //如果启用java返回true，否则返回false  

navigator.platform  //浏览器所在计算机平台的字符串表示  

navigator.plugins  //安装在浏览器中的插件数组  

navigator.taintEnabled  //如果启用了数据污点返回true，否则返回false  

navigator.userAgent  //用户代理头的字符串表示   

5、screen对象

 screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它  

  screen.width/height  //屏幕的宽度与高度，以像素计  

  screen.availWidth/availHeight  //窗口可以使用的屏幕的宽度和高度，以像素计 

  screen.colorDepth  //用户表示颜色的位数，大多数系统采用32位  

  window.moveTo(0, 0);  

  window.resizeTo(screen.availWidth, screen.availHeight);  //填充用户的屏幕

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth
或者

document.documentElement.clientHeight

document.documentElement.clientWidth