首页 > 代码库 > JS事件入门学习

JS事件入门学习

每当发生事件,浏览器就会产生一个事件对象,用来保存与事件有关的一些信息

IE,chrome 支持 window.event,而FF不支持,兼容写法如下:

xxx.onclick =function(evt){  //这里的evt可以改成event,e,下面相应的要对应

  var e = evt || window.event;  

}

 

对于鼠标事件,event对象里面的button属性,表示按下或释放按钮。

w3c浏览器和IE浏览器保存的数据有点不同,所以 我们只兼容的获取当前点击的是左键,中键还是右键

function getButton(evt) { //跨浏览器左中右键单击相应
  var e = evt || window.event;
  if (evt) { //Chrome 浏览器支持 W3C 和 IE
    return e.button; //要注意判断顺序,W3C一次返回0,1,2   
  } else if (window.event) {
    switch(e.button) {  //因为IE浏览器一次返回1,4,2,所以要修改成和w3c一样的数据
      case 1 :
        return 0;
      case 4 :
        return 1;
      case 2 :
        return 2;
    }
  }
}

 

可视区及屏幕坐标
事件对象提供了两组来获取浏览器坐标的属性, 一组是页面可视区左边, 另一组是屏幕坐标

 

clientX 可视区 X 坐标,距离左边框的位置
clientY 可视区 Y 坐标,距离上边框的位置
screenX 屏幕区 X 坐标,距离左屏幕的位置
screenY 屏幕区 Y 坐标,距离上屏幕的位置

 

键盘事件:

shiftKey 判断是否按下了 Shfit 键
ctrlKey 判断是否按下了 ctrlKey 键
altKey 判断是否按下了 alt 键

 

键码:
在发生 keydown 和 keyup 事件时,event 对象的 keyCode 属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母字符集,keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同。

不同的浏览器在 keydown 和 keyup 事件中,会有一些特殊的情况:
在 Firefox 和 Opera 中,分号键时 keyCode 值为 59,也就是 ASCII 中分号的编码;而 IE和 Safari 返回 186,即键盘中按键的键码。

 

JS事件入门学习