JavaScript之事件对象

一、Javascript中有三种事件模型：1内联事件、2脚本事件、3DOM2模型事件

二、内联模型：

<input type="button" value="按钮" onclick="alert('susan')" />
<input type="button" value="按钮" onclick="box();" />

三、脚本事件

var input = document.getElementsByTagName("input")[0];

input.onclick = function(){
   alert("Lee");  
}

四、事件处理函数

javascript处理的事件类型分为鼠标事件、键盘事件、HTML事件

　　

五、事件对象

事件对象我们一般称之为event对象

function box(){

   alert(arguments.length);//0 普通函数是没有事件对象的
};

input.onclick = function(){

    alert(arguments.length);//1 事件绑定含有隐藏的事件对象
}

//获得事件对象
input.onclick=function(){
     alert(arguments[0]);  
}

//或者

input.onclick=function(evt){
    var e = evt || window.event;//兼容ie
}    

六、鼠标事件

对应鼠标事件是web最常用的事件之一

1）鼠标按钮

只有在主鼠标按钮被单击之后才会触发click事件，因此在检查按钮信息时并不重要，但是对于mousedown和mouseup事件来说event存在一个button属性

function getButton(evt){

  var e = evt || window.event;//兼容ie；

  if(evt){
    return e.button;//如果非ie则直接返回  
  }  else if(window.event) {//ie兼容W3C
     switch(e.button){

        case 1:return 0;break;
        case 4:return 1;break;
        case 2:return 2;break;
    }
  }

}

window.onload = function(){

  document.onmouseup=function(){

  if(getButton(evt) == 0){
      alert("按下左键");
   } else if(getButton(evt) == 1){
      alert("按下鼠标中键");
   } else if(getButton(evt) == 2){
      alert("按下鼠标右键");
   }
    
}


}    

2)可视区域与屏幕左边

事件对象提供2组来获取浏览器屏幕坐标的属性

一组是页面可视区坐标，还有一组是屏幕坐标

document.onclick=function(evt){

   var e = evt || window.event;
   alert(e.clientX + "," + e.clientY);//可视区坐标
   alert(e.screenX + "," + e.screenY);  //屏幕坐标
   //如果页面出现滚动条像计算X坐标
   //如果是IE
   alert(e.clientX + document.documentElement.scrollTop +"," + e.clientY);    
   //如果是Chrome
   alert(e.clientX + document.body.scrollTop + "," + e.clientY);
}

3)修改键

对于特性键如：shift、alt、ctrl经常配合鼠标来触发一些特殊的事件，它们经常用来修改鼠标事件和行为

对于的属性分别为shiftKey、altKey、ctrlKey

七、键盘事件

用户在使用键盘时会除非键盘事件　　　

在解释键盘事件之前，先说明一下keydown、keyup和keypress之间的区别

keydown是按下任意键盘。

keyup是弹起任意键盘。

keypress是按下任意字符键

键码：键盘上的任意键，
字符编码：键盘上可以输出的字符的键

1）键码

在发生keydown和keyup，event属性中keyCode会包含一个键码与键盘上字符对应。键码返回的是ASCII的小写字母对应的，键码只是返回那个键的值，不认识字母大小写

//键码在所有浏览器中都兼容
//使用keydown和keyup，如果使用keypress那么在firefox浏览器返回的字符键都为0，只要ie兼容keypress
//
window.onload = function(){

    document.onkeydown = function(evt){
        var e = evt || window.event;
        alert(e.keyCode);
    }
}

2)字符键码

字符键码charCode只有在keypress中才能发生，而且区分大小写，在firefox中是没任何问题的，如果在ie中使用那么会返回undefined，那么要使用keyCode作兼容

window.onload = function(){
    document.onkeypress = function(evt){
    
        alert(String.fromCharCode(getCharCode(evt)));
    }


}

function getCharCode(evt){

    var e = evt ||  window.event;
    if (typeof e.charCode == "number"){
        return e.charCode;
    }  else {
        return e.keyCode;
    }

}

八、W3C与IE

为了浏览器兼容问题，一般兼容属性少的，那么我们开始从事件的目标做兼容

window.onload = function(){

  document.onclick = function(evt){

      alert(getTarget(evt).nodeName);
   }

}

function getTarget(evt){

   var e = evt || window.event;
   return window.event ? e.srcElement : e.target;
}

事件流：描述的是页面接收事件的顺序。当几个都具有事件的元素重叠在一起时，当单击其中一个事件时，并不是只有该事件触发，而层叠在你点将范围内的事件也将会触发

事件冒泡：是事件从里往外触发

window.onload = function(){

  document.documentElement.onclick = function(){
    alert("HTML");
  };
  
  document.body.onclick = function(){
    alert("body");
  };
  
  document.getElementsByTagName("div")[0].onclick = function(){
    alert("DIV");
  };
  
  document.getElementsByTagName("input")[0].onclick = function(){
    alert("INPUT");
  }

}

上述代码描述了一个简单的冒泡事件，我们也可以阻止事件的冒泡行为，代码如下

function stopBubble(evt){

    var e = evt || window.event;
    typeof e.stopPropagation == 'function' ? e.stopPropagation() : e.cancelBubble = true;
}