javascript中的事件-优快云博客

本文深入探讨了JavaScript事件处理的基本概念，包括事件流、事件监听函数、事件对象及其属性/方法。详细解释了如何通过事件处理函数实现用户与网页的交互，以及如何在IE和DOM环境下分配和管理多个事件处理函数。此外，文章还介绍了如何阻止事件的默认行为、停止事件流，以及常见事件类型和键盘事件的处理。最后，提供了一个帮助类的实现思路，以统一处理DOM和IE的不同语法。

静态网站跟动态网站最大的区别就是动态网站能与用户产生交互，能处理数据。在互联网的早期，访问internet的方式与我们现在又很大的不同，那个时候的宽带是很小的，如果要处理验证，往返服务器要很长事件的等待，javascript当时设计就是为了解决这个问题，我们可以在前端直接做验证，就节省了往返服务器的时间。我们用户与html的交互可以通过javascript，纽带就是事件，比如，点击按钮就是一个事件，我们可以在时间处理程序，通俗的讲就是事件回调函数，即我们处理事件的函数里面写我们的脚本，达到交互的效果。

事件流

那什么是事件流，事件流其实就是事件执行的方向，比如代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>
    </title>
    <script type="text/javascript">
        function SayHello() {
            alert("Hello World");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div onclick="SayHello()" style="width:300px; height:300px; background-color:Green">
    <input type="button" value="click me" onclick="SayHello()" />
    </div>
    </form>
</body>
</html>

如果我们点击button，则会弹出两次Hello World,因为，button实际上是在div内，我们点击button的时候同时也在点击div。所以同时会触发button的onclick事件，也会触发div的onclick事件。那它们谁先触发谁后触发呢，触发的顺序其实就是事件流。IE的事件流为冒泡事件流。从最里层的元素开始触发，一直到document元素。Mozilla同IE一样，但是它会一直触发到window对象，netscape的事件流与IE刚好相反，它是从最外层开始触发，一直到最里层元素。DOM的事件流是同时支持这两种。

事件监听函数

其实我更喜欢叫事件处理函数，就是处理这个事件所要执行的功能（函数）。每个事件都有自己的名字，比如onclick，onclick就是事件，然后需要一个函数来处理这个事件。分配时间处理函数有两种方法，第一种是先得到元素也就是对象的引用。然后分配函数

 function GetEvent() {
            var obutton = document.getElementById("Edrick");
            obutton.onclick = SayHello;
        }

需要注意的是，如果采用这样的方式处理事件，那么事件名必须小写，另外的一种方式是直接在元素上声明特性，用函数名用作特性的值，不区分大小写

<input type="button" id="Edrick" value="click me" onclick="SayHello()" />

这里我们做的都是分配一个事件处理函数，但是如果我们想为一个事件分配多个事件处理函数呢？IE跟DOM的做法是不一样的，我们先看看IE的做法。

在IE中每个元素和window对象都有两个方法，一个是attachEvent()和detachEvent().顾名思义，　attachEvent()用来给一个事件附加事件处理函数，　detachEvent().用来将事件处理函数分离出来。

        function GetEvent() {
            var obutton = document.getElementById("Edrick");
            obutton.attachEvent("onclick", FEvent1);
            obutton.attachEvent("onclick", FEvent2);
        }

        function FEvent1() {
            alert("Checked");
        }

        function FEvent2() {
            alert("also Checked");
        }

测试代码会弹出两个系统框

然后我们可以把函数分离出来

        function GetEvent() {
            var obutton = document.getElementById("Edrick");
            obutton.attachEvent("onclick", FEvent1);
            obutton.attachEvent("onclick", FEvent2);
            obutton.detachEvent("onclick", FEvent2);
        }

这样就会只弹出一个系统框了

DOM提供的方法是addEventListener()和 removeEventListener(),他们的用法跟IE上的差不多，唯一的不同就是它们需要提供3个参数，第三个参数指明事件流，true为从外到里的事件流，false则为从里到外的事件流。还要注意点的是，如果在addEventListener()中指明的事件流是冒泡，那么在removeEventListener()的时候，第三个参数也应该为冒泡，必须一致才能正确的删除事件。如果不这样做，虽然不会出错，但是函数也不会正确的删除

事件对象

有时候我们需要知道或者获取事件触发时候的一些信息，比如

引起事件的对象

事件发生时的一些我们需要的信息（鼠标坐标，键盘键位等）事件对象只有在事件发生时才被创建，而且只有事件处理函数可以访问。所有的事件函数执行完毕后，事件对象就销毁

IE和DOM不同，我们先看IE获取事件对象的方法

在IE中事件对象是window的一个属性event,尽管它是window对象的属性，但是它也只能在事件发生时访问。

        function SayHello() {
            var oevent = window.event;
            alert("Hello World");
        }

在DOM中，事件对象必须作为参数传递给处理函数

        function SayHello() {
            var oevent = arguments[0];
            alert("Hello World");
        }

当然，这里也可以直接传进来

        function SayHello(event) {
            var oevent = event
            alert("Hello World");
        }

属性/方法

事件对象的属性和方法可以让我们得到特定的信息，注意，特定属性只对特定的事件，IE跟DOM的属性有差别

　　DOM属性/方法

相似性

在IE跟DOM的事件对象属性中，有一些相似的属性

type //获取事件的类型，比如是onclick或者onmouseover

keyCode //获取按键的代码 (keydown/keyup)。回车键的keyCode为13，空格键的keyCode为32，回退的keyCode为8

shiftKey

altKey

ctrlKey //检测Shift,Alt,Ctrl是否按下

clientX

clientY //检测鼠标在客户端区域的位置

screenX

screenY //检测鼠标相对屏幕的位置

区别

检测事件源，触发时间的对象

IE：srcElement

DOM:target

获取字符代码

IE：IE使用属性keyCode获取字符代码（非Shift,Alt,Ctrl），IE的 keyCode会直接返回字符的代码（unicode值）

DOM：DOM使用charCode来获取，然后使用String.fromCharCode()来返回实际的字符，也可以在获取字符的时候使用isChar来判断按键是否包含字符

阻止事件的默认行为

IE：returnValue

DOM:preventDefault()

为什么要阻止事件的默认行为呢，典型的例子，我们阻止右键点击就需要

        function LeftOrRight() {
            document.oncontextmenu = function () {
                alert("禁止右键点击");
                var oevent = window.event;
                oevent.returnValue = false;
                setInterval("alert('将在2秒后关闭');window.close();",2000);
            }
        }

当然这里是IE的写法，DOM是不一样的。

停止事件流

IE：cancelBubble=true

DOM:stopPropagation()

事件类型

鼠标事件

onclick //用户单击鼠标左键时发生

dblclick //用户双击鼠标左键时发生

mousedown //用户单击任意一个鼠标按钮时发生

mouseout //鼠标指针在某个元素上，且用户正要将其移出元素的边界

mouseover //鼠标移出某个元素，到另一个元素上时发生

mouseup //用户松开任意一个按钮时发生