JavaScriptイベントオブジェクト入門_基礎知識

JavaScript イベントの重要な側面は、比較的一貫した特性があり、開発に強力な機能を提供できることです。
最も便利で強力なものはイベント オブジェクトで、マウス イベントやキーボード クリックの処理に役立ちます。
さらに、一般イベントのキャプチャ/バブリング フロー関数を変更することもできます。

1 つのイベント オブジェクト

// 事件处理函数的一个标准特性是:以某些方式访问的事件对象包含有关于当前事件的上下文信息;
// 事件处理由三部分组成:对象.事件处理函数=函数;
  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对象;
  }

//イベントオブジェクトを通じてマウスボタン情報と画面座標を取得できます。

2 マウス イベント
// マウス イベントは、Web 上で最も一般的に使用されるイベントです。結局のところ、マウスは依然として主要な位置決めデバイスです。

1. マウス ボタン

// 只有在主鼠标按钮被单击时(一般是鼠标左键)才会触发click事件,因此检测按钮的信息并不是必要的;
// 但对于mousedown和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放按钮;
  　　 非IE(W3C)中的button属性
  值           说明 
  0       表示主鼠标按钮(一般是鼠标左键);
  1       表示中间的鼠标按钮(鼠标滚轮按钮);
  2       表示次鼠标按钮(一般是鼠标右键);
    IE中的button属性 
  1       表示主鼠标按钮(一般是鼠标左键);
  2       表示次鼠标按钮(一般是鼠标右键);
  4       表示按下了中间的鼠标按钮;
// 鼠标按钮兼容;
  function getButton(evt){
    var e = evt || window.event;
    if(evt){                // Chrome浏览器支持W3C和IE标准;
      return e.button;          // 要注意判断顺序;
    }else if(window.event){
      switch(e.button){
        case 1:
          return 0;
        case 4:
          return 1;
        case 2:
          return 2;
      }
    }
  }
  document.onmouseup = function(evt){
    if(getButton(evt) == 0){
      alert('按下了鼠标左键!');
    }else if(getButton(evt) == 1){
      alert('按下了中键');
    }else if(getButton(evt) == 2){
      alert('按下了右键!');
    }
  }

2. 視覚領域と画面座標

// 事件对象提供了两组来获取浏览器坐标的属性:
// 一组是页面可视区坐标;
// 一组是屏幕坐标;
    坐标属性
  属性       说明
  clientX     可视区X坐标,距离左边框的距离;
  clientY     可视区Y坐标,距离上边框的距离;
  screenX     屏幕区X坐标,距离左屏幕的距离;
  screenY     屏幕区Y坐标,距离上屏幕的距离;
  pageX      页面中X坐标,距离整个页面左边框的距离;
  pageY      页面中Y坐标,距离整个页面上边框的距离;

// 判断鼠标点击位置函数;
  document.onclick = function(evt){
    var e = evt || window.event;
    alert(e.clientX+','+e.clientY);
    alert(e.screenX+','+e.screenY);
    alert(e.pageX+','+e.pageY);
  }
  // PS:在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等;
  // IE8以下不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来;
  // 这时候需要用到document.body(混杂模式)或document.documentElement(标准模式)中的scrollTop和scrollLeft属性;
  // pageX和pageY兼容函数;
  var div = document.getElementById('myDiv');
  addEventListener(div,'click',function(evt){
    var evt = event || window.event;
    var pageX = evt.pageX,
      pageY = evt.pageY;
    if(pageX === undefined){
      pageX = evt.clientX+(docuemnt.body.scrollLeft || document.documentElement.scrollLeft);
    }
    if(pageY === undefined){
      pageY = evt.clientY+(document.body.scrollTop || document.documentElement.srollTop);
    }
    alert(pageX+pageY);
  });

3. 変更キー

// 有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件;
// 这些键为:Shift/Ctrl/Alt和Meat(Window中是Windows键,苹果机中是Cmd键);
// 它们经常被用来修改鼠标事件和行为,所以叫修改键;
        修改键属性
  属性         说明 
  shiftKey      判断是否按下了Shift键;
  ctrlKey       判断是否按下了ctrlKey键;
  altKey       判断是否按下了alt键;
  metaKey       判断是否按下了windows键,IE不支持;

// 判断按键函数;
  function getKey(evt){
    var e = evt || window.event;
    var keys = [];
    if(e.shiftKey) keys.push('shift');　　　　// 判断是否同时按下了shift键;
    if(e.ctrlKey) keys.push('ctrl');
    if(e.altKey) keys.push('alt');
    return keys;
  }
  document.onclick = function(evt){
    alert(getKey(evt));　　　　　　　　　　　　 // 得到一个数组,可能包含shift/ctrl/alt的值;
  }

3 つのキーボード イベント

ユーザーがキーボードを使用すると、キーボード イベントがトリガーされます。

「DOM レベル 2 イベント」は当初キーボード イベントを指定していましたが、後に対応するコンテンツを削除しました。

最終的には、元のキーボード イベントが使用されましたが、IE9 が率先して "DOM3" レベルのキーボード イベントをサポートしました。

1.キーコード

 // 在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应;
 // 对数字字母字符集,keyCode属性的值与ASCII码中对应小写字母或数字的编码相同;字母中大小写不影响;
   document.onkeydown = function(evt){
     alert(evt.keyCode);
   }

2.文字エンコーディング

四 W3C与IE
// 在标准的DOM事件中,event对象包含与创建它的特定事件有关的属性和方法;

// 触发的事件类型不一样,可用的属性和方法也不一样;

W3C中event对象的属性和方法
属性/方法             类型             读/写             说明
bubbles             Boolean          只读             表明事件是否冒泡;
cancelable          Boolean          只读             表明是否可以取消事件的默认行为;
currentTarget       Element          只读             其事件处理程序当前正在处理事件的那个元素;
detail              Integer          只读             与事件相关的细节信息;(一般用于滚轮信息的值);
eventPhase          Integer          只读             调用事件处理程序的阶段:1表示捕获阶段,2表示处理目标,3表示冒泡阶段;
preventDefault()    Function         只读             取消事件的默认行为;如果cancelable的值是true,则可以使用这个方法;
stopPropagation()   Function         只读             取消事件的进一步捕获或冒泡;如果bubbles的值为true,则可以使用这个方法;
target              Element          只读             事件的目标;
type                String           只读             被触发的事件的类型;
view                AbstractView     只读             与事件关联的抽象视图;等同于发生事件的window对象;

 IE中的event对象的属性 
 属性                 类型            读/写             说明
 cancelBubble       Boolean          读写             默认值为false,但将其设置为true就可以取消事件冒泡;
 returnValue        Boolean          读写             默认值为true,但将其值设置为false就可以取消事件的默认行为;
 srcElement         Element          只读             事件的目标;
 type               String           只读             被触发的事件类型;

// 兼容target和srcElement函数
  function getTarget(evt){
    var e = evt || window.event;
    return e.target || e.srcElement;      // 兼容得到事件目标DOM对象;
  }
  document.onclick = function(evt){
    var target = getTarget(evt);
    alert(target);
  }

五 事件流

 事件流是描述的从页面接收事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么点击其中一个元素;
 并不是只有当前被点击的元素会触发事件,而是层叠在点击范围的所有元素都会触发事件;
 事件流包含两种模式:冒泡和捕获;

1.事件冒泡
 是从里往外逐个触发;

2.事件捕获
 是从外往里逐个触发;

// 现代浏览器都是冒泡类型;而捕获模式是早期的Netscape默认情况;
// 现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式;
  document.onclick = function(){
    alert('我是document');
  }
  document.documentElement.onclick = function(){
    alert('我是html');
  }
  document.body.onclick = function(){
    alert('我是body');
  }
  document.getElementById('box').onclick = function(){
    alert('我是div');
  }
  document.getElementsByTagName('input')[0].onclick=function(){
    alert('我是input');
  }
  // PS:点击input会逐级冒泡到document;

// 阻止事件冒泡兼容函数
  function stopPro(evt){
    var e = evt || window.event;
    // 如果存在cancelBubble,则是IE浏览器,将其值设为true就可以阻止事件冒泡;
    // 否则执行W3C中的阻止事件冒泡方法stopPropagation();
    window.event ? e.cancelBubble = true : e.stopPropagation();
  }