JavaScript之处理事件

              JavaScript之处理事件

一、什么是JavaScript事件？
事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水，当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。 事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。说的更清楚一点的话，事件就是文档或浏览器中发生的特定交互瞬间！

二、事件流：
IE的事件冒泡，Netscape的事件捕获。先来一张图，简要的看下结构：

1、事件冒泡
事件冒泡即事件最开始由最具体的元素接收，然后逐级向上传播至最不具体的节点。拿上面的图来说明，就是当点击text部分时，先由div处的元素接收，然后逐级传播至window，即执行5-6-7-8的过程。
2、事件捕获
事件捕获即事件最早由不太具体的节点接收，而最具体的节点最后接收到事件。同理，在上面的模型中，就是点击text部分时，先由window接收，然后逐级传播至div元素，即执行1-2-3-4-的过程。

三、Javascript事件处理程序的3种方式
产生了事件，我们就要去处理他，Javascript事件处理程序主要有3种方式：
1、HTML事件处理程序
即我们直接在HTML代码中添加事件处理程序，如下面这段代码：

　　
从上面的代码中我们可以看出，事件处理是直接嵌套在元素里头的，这样有一个小问题：就是html代码和js之间的耦合性太强，如果想要改变js中的showmsg，那么不但要在js中修改，还需要到html中进行修改，如果代码量十分大的话，会花费我们很多的时间。

2、DOM0级事件处理程序
为指定对象添加事件处理

　　
这里我们可以看到，在添加删除事件处理的时候，最后一种方法更直接，也最简便。但是需要注意的是，在删除事件处理的时候，传入的参数一定要跟之前的参数一致，否则删除会失效！
四、事件传播机制
客户端JavaScript程序采用了异步事件驱动编程模型。当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web浏览器就会产生事件。如果JavaScript应用程序关注特定类型的事件，那么它可以注册当这类事件发生时要调用的一个或多个函数。当然了，这种风格并非Web编程独有，所有使用图形用户界面的应用程序都采用了它。

五、事件处理程序的调用
1.事件处理程序的参数：通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。实例（给页面上id为div1的元素添加点击事件，当点击该元素时在控制台输出事件类型和被点击元素本身）

div1

从结果可以看出来：每点击div一次，就输出一次 div，也就是元素本身

2.事件处理程序的运行环境：关于事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题，可以看下面3个例子。

div1

从结果可以看出：
第一种方法事件处理程序中this指向这个元素本身；

实例二：

div1

从结果可以看出：
　　　　①第二种方法事件处理程序中this也指向这个元素本身；
　　　　②存在第二种方法时，它会覆盖第一种方法注册的事件处理程序；
　　
实例三：

div1

从结果可以看出：
　　　　①第三种方法事件处理程序中this也指向这个元素本身；
　　　　②第三种方法并不会覆盖第一种或第二种方法注册的事件处理程序；

六、事件处理程序的调用顺序：
多个事件处理程序调用规则如下：
　　①通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用；
　　②使用addEventListener()注册的处理程序按照它们的注册顺序依次调用；
　　③使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；
七、事件取消：
　　①取消事件的浏览器默认操作（比如点击超链接元素会自动发生页面跳转的默认操作）：如果使用前两种方法注册事件处理程序，可以在处理程序中添加返回值false来取消事件的浏览器默认操作。在支持addEventListener()的浏览器中，也可以通过调用事件对象的preventDefault()方法取消事件的默认操作。至于IE8及其之前的浏览器可以通过设置事件对象的returnValue属性为false来取消事件的默认操作。例如：

function cancelHandler(event){
var event = event || window.event;
if(event.preventDefault){
event.preventDefault();
}
if(event.returnValue){
event.returnValue = false;
}
return false;
}

②取消事件传播：在支持addEventListener()的浏览器中，可以调用事件对象的一个stopPropagation()方法阻止事件的继续传播，它能工作在事件传播期间的任何阶段（捕获期阶段、事件目标本身、冒泡阶段）；但是在IE8以及其之前版本的浏览器中并不支持stopPropagation()方法，而且这些浏览器也不支持事件传播的捕获阶段，相应的，IE事件对象有一个cancelBubble属性，设置这个属性为true能阻止事件进一步传播，也就是阻止他进一步的冒泡。

总结：

通过对JavaScript处理事件的一些知识的学习，让我对事件有了最基本的了解，明白了事件流是什么，以及JavaScript处理事件的3种方式，也懂得了JavaScript在处理时间时候如何调用和处理事件时候的调用顺序，最后还了解了事件取消的相关知识，因为事件是JavaScript应用跳动的心脏，所以了解事件的相关知识是十分有必要的，通过这次的学习，让我对JavaScript处理事件的一些知识有了更深的了解，从而也加深了我对JavaScript知识的掌握，为我以后的学习奠下了坚实的基础。