JavaScript的事件概念和事件监听

1、事件的概念：

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

2、事件流：

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

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

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

4、通用性的事件监听方法：

　　（1）绑定HTML元素属性：

　　　　<input type="button" value="clickMe" onclick="check(this)">

　　（2）绑定DOM对象属性：

　　　　document.getElementById("xxx").onclick=test;

5、不常用的事件监听：

　　5.1  IE中的监听方法：

5.1.1  [object].attachEvent("事件类型","处理函数");//添加监听

5.1.2  [object].detachEvent("事件类型","处理函数");//取消监听

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

5.2.1  [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");

5.2.2  [object].removeEvent("事件类型","处理函数","冒泡事件或捕获事件");

　　　　提示：IE监听方法中事件类型和标准DOM监听方法中的事件类型写法有点不同，前者事件类型用“on”开头，不如：“onclick”、“onmousemove”等，而后者不需要“on”，就是“click”、“mousemove”等。

6、标准事件流：

　　6.1  举个例子：冒泡事件（从内至外）

　　运行结果是

　　6.2  冒泡事件和捕获事件的比较

　　运行结果：

　　倘若把addEventListener中的true改为false，那么运行结果为：

7、访问事件对象：

事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。

7.1  IE中的事件对象：

IE中的事件对象是一个隐式可用的全局对象：event，它是window对象的一个属性。

7.2  标准DOM的事件对象：

在标准DOM浏览器检测发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入

//IE中得到事件对象

op.onclick=function(){

var oEvent=window.event;

}

//标准DOM中得到事件对象

op.onclick=function(oEvent){

//作为参数传进来

}

经验之谈：为了兼容不同的浏览器，通常采用下面的方法得到事件对象。

op.onclick=function(oEvent){

if(window.event){

oEvent=window.event;

        }

}

　　Event事件对象常用的属性：

8、常用的事件类型：

　　8.1  常用的鼠标事件：

8.2  常用的键盘事件：

　　8.3  HTML事件：