事件

事件介绍

事件概述 : 用户在浏览器上触发一个操作, 浏览器上会指向相关的函数处理, 这个称之为事件

事件触发 :   用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等),  就是事件触发

事件模式 --- JavaScript有两种实现模式

内联模式
直接在HTML标签中添加事件. 这种模型是最传统简单的一种处理事件的方法
但是这种模式中事件和HTML是混写的, 并没有将JS与HTML分离, 当代码量多了以后,对后期代码维护和扩展很不利.
　　例如 : <input type="button" value="按钮" onclick="alert('hello');" />
注意 : 内联模式调用的函数不能放到window.onload里面, 否则会找不到该函数.

脚本模式
脚本模式能将JS代码和HTML代码分离, 符合代码规范.
使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件; 如我们可以采用三种方式来获得节点对象:

• getElementById(),
• getElementsByTagName(),
• getElementsByName()

事件的划分
事件的执行者 --- 元素
事件名 --- on开头+对应的名字
事件处理函数 --- function
　　//执行者 事件名
　　document.onclick = function(){
　　　　//处理函数
　　}

事件分类

鼠标事件 (mouse)

• 点击的事件 : onclick / ondblcick / onmousedown / onmouseup /
• 移进 : onmouseenter / onmouseover (子元素也会触发)
• 移出 : mouseout (子元素也会触发) / mouseleave
• 移动 : mousemove

键盘事件 (key)

• onkeydown --- 键盘按下
• onkeyup --- 键盘弹起
• onkeypress --- 字符键才触发 按下

系统事件

• HTML事件
• load 加载事件
• unloa 卸载
• select 选择
• change 修改
• blur 失去焦点
• focus 获取焦点
• input 输入内容
• scroll 滚动
• submit 提交
• reset 重置

event中的属性

位置属性

• offsetX ---- 以鼠标离当前元素的X距离
• offsetY ---- 鼠标离当前元素的Y距离
• clientX ---- 鼠标离网页最左的距离(不包含不可见部分)
• clientY ---- 鼠标离网页最顶部的距离(不包含不可见部分)
• pageX ---- 鼠标离网页最左的距离(包含不可见部分)
• pageY ---- 鼠标离网页最顶部的距离(包含不可见部分)
• screenX ---- 鼠标离屏幕最左部的距离
• screenY ---- 鼠标离屏幕最顶部的距离

按键属性 ---- 三个按键是否按下 (长按) --- 先按下再操作

• ctrlKey ---- console.log(e.ctrlKey) --- 是否按下Ctrl
• shiftKey ---- console.log(e.shiftKey) --- 是否按下shift
• altKey ---- console.log(e.altKey) --- 是否按下alt
• button ---- 左键为0, 中间为1, 右键为2
• console.log(e.button ) --- 点击是鼠标的哪个键
• type
• target ---- 目标对象
• console.log(e.target ) --- div这个元素, 当前触发的对象
• console.log(e.currentTarget ) --- 当前加事件的对象

键盘的输入相关属性

key获取对应的按下的键
keyCode获取按下的键的ASCII码
charCode 获取keypress事件中按键的ASCII码