事件之事件对象（event）

DOM中的事件对象

event对象中存在是属性和方法如下表所示：

在事件处理程序内部，对象this始终等于currentTarget（事件处理程序注册在这个元素之上），而target只包含事件的实际目标（即实际作出事件处理的元素）。

使用方法：event.属性

                eg:event.preventDefault()；--------取消特定时间的默认事件（写在事件处理程序内部）

提示：只有事件处理程序执行期间，event对象才会存在，一旦时间内处理程序执行完成，event对象就会销毁。

IE中的事件对象

 最主要的事件对象如下表所示

需要注意的是

IE中使用returnValue组织事件默认行为中，无法提前确定事件能否被取消，因为IE 中没有cancelable属性进行判断。

而cancelBubble属性只能取消事件冒泡，因为IE不支持事件冒泡。

跨浏览器事件对象

对前面介绍的EventUtil 对象加以增强，添加如下方法以求同存异。

var EventUtil = {
      addHandler: function (element, type, handler) {
        //省略的代码
      },
      getEvent: function (event) {
        return event ? event : window.event;
      },
      getTarget: function (event) {
        return event.target || event.srcElement;
      },
      preventDefault: function (event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },
      removeHandler: function (element, type, handler) {
        //省略的代码
      },
      stopPropagation: function (event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    };

以上代码显示，我们为EventUtil 添加了4 个新方法。第一个是getEvent()，它返回对event对象的引用。考虑到IE 中事件对象的位置不同，可以使用这个方法来取得event 对象，而不必担心指定事件处理程序的方式。在使用这个方法时，必须假设有一个事件对象传入到事件处理程序中，而且要把该变量传给这个方法，如下所示。

btn.onclick = function (event) {
      event = EventUtil.getEvent(event);
    };

在兼容DOM 的浏览器中，event 变量只是简单地传入和返回。而在IE 中，event 参数是未定义的（undefined），因此就会返回window.event。将这一行代码添加到事件处理程序的开头，就可以确保随时都能使用event 对象，而不必担心用户使用的是什么浏览器。

第二个方法是getTarget()，它返回事件的目标。在这个方法内部，会检测event 对象的target属性，如果存在则返回该属性的值；否则，返回srcElement 属性的值。可以像下面这样使用这个方法。

btn.onclick = function (event) {
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
    };

第三个方法是preventDefault()，用于取消事件的默认行为。在传入event 对象后，这个方法会检查是否存在preventDefault()方法，如果存在则调用该方法。如果preventDefault()方法不存在，则将returnValue 设置为false。下面是使用这个方法的例子。

var link = document.getElementById("myLink");
    link.onclick = function (event) {
      event = EventUtil.getEvent(event);
      EventUtil.preventDefault(event);
    };

以上代码可以确保在所有浏览器中单击该链接都不会打开另一个页面。首先，使用EventUtil.getEvent()取得event 对象，然后将其传入到EventUtil.preventDefault()以取消默认行为。第四个方法是stopPropagation()，其实现方式类似。首先尝试使用DOM 方法阻止事件流，否则就使用cancelBubble 属性。下面看一个例子。

var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
      alert("Clicked");
      event = EventUtil.getEvent(event);
      EventUtil.stopPropagation(event);
    };
    document.body.onclick = function (event) {
      alert("Body clicked");
    };

在此，首先使用EventUtil.getEvent()取得了event 对象，然后又将其传入到EventUtil.stopPropagation()。别忘了由于IE 不支持事件捕获，因此这个方法在跨浏览器的情况下，也只能用来阻止事件冒泡。