BOM学习笔记（二）绑定事件处理函数、history、location

5、navigator对象包含有关浏览器的信息        

     navigator对象集合

           plugins[]: 保存所有插件对象的集合

     navigator 对象属性(常用的属性)

           cookieEnabled: 判断当前浏览器是否启用cookie

           userAgent: 保存了浏览器名称，版本号的字符串

 

6、history: window对象中保存当前窗体访问过的url的历史记录栈

      属性  length：返回历史列表中的网址数

      方法

      history.go(0): 刷新当前页

                go(±n): 前进/后退n次

                back()：加载 history 列表中的前一个 URL

                forward()：加载 history 列表中的下一个 URL

 

7、location：当前窗口正在打开的url地址对象

      location.search：获得url中的查询字符串

            进一步获得参数名和参数值，先按&分隔，再按=分隔

     location.replace("新url"): 在当前窗口打开新链接，不可后退（history中旧url被新url替换了）

     location.reload()：刷新

 

8、screen: 封装当前屏幕的显示信息

screen.height/width: 桌面完整分辨率宽高

      screen.availHeight/availWidth: 去掉任务栏后剩余分辨率的宽高

 

9、事件：浏览器自动触发的或用户手动触发的对象状态的改变

  绑定事件处理函数的3种方法

①在DOM元素中直接绑定；这里的DOM元素，可以理解为HTML标签。

语法为： onXXX="JavaScript Code"
其中：onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标移入事件 onmouseover

JavaScript Code 为处理事件的JavaScript代码，一般是函数，也可以是js语句

例、单击一个按钮，弹出警告框的代码有如下两种写法。

 原生函数：<input οnclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
 自定义函数：

<input οnclick="myAlert()" type="button" value="点击我，弹出警告框" />

<script type="text/javascript">

function myAlert(){

alert("谢谢支持");

}

</script>

 

②在JavaScript代码中绑定；

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
   在JavaScript代码中绑定事件的语法为：
      elementObject.onXXX=function(){  //elementObject为DOM对象，onXXX 为事件名称
             // 事件处理代码
        }
 例、为 id="a" 的按钮绑定一个事件，显示它的 type 属性：

<input id="a" type="button" value="点击我，显示 type 属性" />

<script type="text/javascript">

document.getElementById("a").οnclick=function(){

alert(this.getAttribute("type")); // this 指当前发生事件的DOM元素，这里是<input>标签

}

</script>

这里的事件类型表示你要使用哪种事件类型比如click, 回调函数里面写着触发此事件你要做什么事情, 事件机制分为冒泡和捕获,如果为false表示事件冒泡,为true表示事件捕获

 

③使用addEventListener() 或 attachEvent() 来绑定事件监听函数。

 

  addEventListener()函数：标准的绑定事件监听函数的方法，是W3C所支持的

     语法：dom对象.addEventListener(事件类型, 回调函数, 事件机制)               

                事件类型：事件名没有“on”

                回调函数里面写着触发此事件你要做什么事情，不带“()”

                 事件机制分为冒泡和捕获,如果为false表示事件冒泡,为true表示事件捕获

  attachEvent()函数：IE8.0及其以下版本使用它来绑定事件监听函数
      语法：dom对象.attachEvent(eventType, fn)

                   eventType表示事件类型与addEventListener()不同，这里的事件名称有“ on ”

                   第二个是回调函数

  

兼容注册事件写法

if(dom.addEventListener) {
   dom.addEventListener(eventType, fn);
} else {
   if(dom.attachEvent) {
 dom.attachEvent('on' + eventType, fn);
 }
}

 

10、事件周期：从浏览器捕获到事件后，一直到最后一个事件触发完，经历的过程。

DOM标准：3个阶段：

    1. （由外向内）捕获：从最外层html元素开始，向内逐层记录每层元素绑定的事件处理函数。到目标元素为止

    2. 目标触发：自动执行目标元素上绑定的事件处理函数

    3. （由内向外）事件冒泡：从目标元素的父元素开始，逐层向上执行每层的事件处理函数，到最外层html结束。

IE8的事件周期：2个阶段：没有捕获

 

 

11、event对象：当事件发生时，自动创建，封装了事件信息

        

属性和方法	描述
currentTarget	返回其事件监听器触发该事件的元素。
target	返回触发此事件的元素（事件的目标节点）。
type	返回当前 Event 对象表示的事件的名称。
preventDefault()	通知浏览器不要执行与事件关联的默认动作。 取消事件
stopPropagation()	不再派发事件。取消冒泡

 

    

Event对象的一些兼容性写法

①获得event对象兼容性写法 event || (event = window.event);

②获得target兼容型写法 event.target||event.srcElement

③阻止浏览器默认行为兼容性写法 
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

④阻止冒泡写法 
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);