JavaScript 事件对象介绍

JavaScript事件的一个重要的方面是它们拥有一些相对一致的特点,可以给开发提供强大的功能;
最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况;
此外还可以修改一般事件的捕获/冒泡流的函数;

一 事件对象

// 事件处理函数的一个标准特性是:以某些方式访问的事件对象包含有关于当前事件的上下文信息;// 事件处理由三部分组成:对象.事件处理函数=函数;  document.onclick = function(){    alert('Lee');  }  // PS:以上程序解释:click表示一个事件类型,单击;  // onclick:表示一个事件处理函数或绑定对象的属性(或者叫事件监听器);  // document:表示一个绑定的对象,用于触发某个元素区域;  // function():匿名函数是被执行的函数,用于触发后执行;// 除了用匿名函数的方法作为被执行的函数,也可以设置成独立的函数;  document.onclick = box;                // 直接赋值函数名即可,无须括号;  function box(){    alert('Lee');  }// this关键字和上下文// 在 面向对象 那章我们了解到:在一个对象里,由于作用域的关系,this代表着离它最近的对象;  var input = document.getElementsByTagName('input')[0];  input.onclick = function(){    alert(this.value);                // HTMLInputElement,this表示input对象;  }

// 当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息;// 包括导致事件的元素/事件的类型/以及其它与特定事件相关的信息;// 事件对象,我们一般称作为event对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的;// 首先,我们必须验证一下,在执行函数中有没有传递参数,是否可以得到隐藏的参数;  function box(){                   // 普通空参函数;    alert(arguments.length);            // 0;没有得到任何传递的参数;  }  input.onclick = function(){             // 事件绑定的执行函数;    alert(arguments.length);            // 1;得到一个隐藏参数;  }  // PS:通过上面两组函数,我们发现,通过事件绑定的执行函数是可以得到一个隐藏参数的;  // 说明,浏览器会自动分配一个参数,这个参数其实就是event对象;  input.onclick = function(){    alert(arguments[0]);              // MouseEvent,鼠标事件对象;  }  // 上面这种做法比较麻烦,那么比较简单的做法是,直接通过接收参数来得到即可;  input.onclick = function(evt){           // 接受event对象,    alert(evt);                  // MouseEvent,鼠标事件对象;  }  // 直接接收event对象,是W3C的做法,IE不支持,IE自己定义了一个event对象,直接在window.event获取即可;  input.onclick = function(evt){    var e = evt || window.event;    alert(e);                   // 实现跨浏览器兼容获取event对象;  }