跳到主要内容

事件

一、事件​

事件是发生并得到处理的操作，即：事情来了，然后处理。

例如：

  • 电话铃声响起（事件发生），需要接电话（处理）

  • 学生举手请教问题（有事了），需要解答（处理）

  • 按钮被点击了，然后对应有处理代码（一般是函数）

  • 光标进入文本框的区域了，然后对应一个函数来处理。

二、常见的事件​

onchange        // 区域的内容被改变。 
oncopy          // 内容被复制
oncontextmenu   // 显示上下文菜单（如鼠标右键的时候显示选项菜单）

onclick         //单击 
ondblclick      //双击

onfocus         //获得焦点。 
onblur          //失去焦点。 

onkeydown        //某个键盘按键被按下。 
onkeyup          //某个键盘按键被松开。 

onkeypress      //某个键盘按键被按下并松开。 
onload          //一张页面或一幅图像完成加载。 

onmousedown     //鼠标按钮被按下。 
onmouseup       //鼠标按键被松开。 
onmouseover     //鼠标移到某元素之上。 
onmouseout       //鼠标从某元素移开。 
onmousemove      //鼠标移动。 

onreset          //重置按钮被点击。 
onresize         //窗口重新调整大小。 
onsubmit         //确认(提交)按钮被点击。 
onunload          //用户关闭页面

三、event 对象​

一个事件一般包括：事件源（触发事件的元素，如：按钮，鼠标的位置及状态、按下的键，事件发生的时间等。而这些信息都属于event对象的属性。（什么时间，发生了什么事情，发生在谁身上等等）。

event对象只在事件发生（如：点击事件）的过程中才有效。如：当点击按钮时，就会自动产生event对象。event对象是自带的对象，是固定写法。

在W3C标准中，直接在函数中声明该参数即可：

btn.onclick = function(event) { //event在调用和函数定义时，都写上也是考虑兼容问题
    //兼容性写法，支持老版本的IE
    var evt = event || window.event || event;   
};

四、event 事件的属性​

e.button    //返回当事件被触发时，哪个鼠标按钮被点击（鼠标左键，鼠标中键，鼠标右键）。 
e.altKey    //返回当事件被触发时，"ALT" 是否被按下，按下为 true。 
e.shiftKey  //返回当事件被触发时，"SHIFT" 键是否被按下。
e.ctrlKey   //返回当事件被触发时，"CTRL" 键是否被按
e.clientX   //返回当事件被触发时，鼠标指针的水平坐标（等同于 e.screenX）。 
e.clientY   //返回当事件被触发时，鼠标指针的垂直坐标（等同于 e.screenY)。
e.pageX     // 返回鼠标距离页面左边的距离（包含滚动条滚动的距离 + 鼠标距左边可是区域的距离）
e,pageY

五、键盘事件​

获取键盘对应的编码：

document.onkeydown = document.onkeyup = function (e) {
    var e = window.event || e;
    var keyCode = evt.which || evt.keyCode; // 获取按下键对应的编码
}