JavaScript之Event事件

JavaScript 事件是由访问 Web 页面的用户引起的一系列操作。当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键

JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型。

内联模型

这种模型是最传统接单的一种处理事件的方法。 在内联模型中， 事件处理函数是 HTML标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的 ，并没有与 HTML 分离。

脚本模型

由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题， 在 JavaScript 中处理事件。这种处理方式就是脚本模型。

事件处理函数

javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件

所有的事件处理函数都会都有两个部分组成，on + 事件名称

鼠标事件：

onclick:用户单击鼠标按钮或按下回车键时触发

ondblclick:当用户双击主鼠标按钮时触发

onmousedown:当用户按下鼠标还未弹起时触发

onmouseup：当用户释放鼠标按钮时触发

onmouseover：当鼠标移到某个元素上方时触发

onmouseout：当鼠标移出某个元素上方时触发

onmousemove：当鼠标指针在元素上移动时触发 

键盘事件

onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发onkeyup：当用户释放键盘上的键触发

HTML 事件

onload：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。

onselect：当用户选择文本框(input 或 textarea)中的一个或多个字符触发

onchange：当文本框(input 或 textarea)内容改变且失去焦点后触发

onfocus：当页面或者元素获得焦点时在 window 及相关元素上面触发 

onblur：当页面或元素失去焦点时在 window 及相关元素上触发

onsubmit：当用户点击提交按钮在

元素上触发

onreset：当用户点击重置按钮在元素上触发

onresize：当窗口或框架的大小变化时在 window 或框架上触发

onscroll：当用户滚动带滚动条的元素时触发

什么是事件对象

当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息 。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息

通过事件绑定的执行函数是可以得到一个隐藏参数的 。说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象

直接接收 event 对象，是 W3C 的做法，IE 不支持，IE 自己定义了一个 event 对象，直接在 window.event 获取即可。

input.onclick = function (evt) {

var oEvent = evt || window.event; //实现跨浏览器兼容获取 event 对象

alert(oEvent );};

鼠标事件

clientX 可视区 X 坐标，距离左边框的位置

clientY 可视区 Y 坐标，距离上边框的位置

screenX 屏幕区 X 坐标，距离左屏幕的位置

screenY 屏幕区 Y 坐标，距离上屏幕的位置

keyCode

    获取用户按下键盘的哪个按键

    例子：键盘控制Div移动

其他属性   ctrlKey、shiftKey、altKey

    例子：提交留言

    回车 提交         ctrl+回车 提交

    例子:  只能输入数字的输入框

    keydown、keyup事件的区别

默认行为contextmenu

当我们右击网页的时候，会自动出现 windows 自带的

菜单。那么我们可以使用 contextmenu 事件来修改我们指定的菜单，但前提是把右击的默认行为取消掉

阻止默认行为

    普通写法：return false;

事件冒泡，是从里往外逐个触发。

事件捕获，是从外往里逐个触发。

阻止冒泡：

    window.event? window.event.cancelBubble = true : oEvent.stopPropagation();

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果

好处

    1.提高性能

    2.新添加的元素，还会有之前的事件

event对象：事件源：不管在那个事件中，只要你操作的那个元素就是事件源

ie : window.event.srcElement  标准下 ：event.target

nodeName : 找到当前元素的标签名

事件绑定分为两种：一种是传统事件绑定(内联模型，脚本模型)，一种是现代事件绑定(DOM2 级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。

W3C  事件处理函数

“DOM2 级事件”定义了两个方法，用于添加事件和删除事件处理程序的操作：

addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true 表示捕获，false 表示冒泡)。

W3C 的现代事件绑定的特点 : 1.不需要自定义了；2.可以屏蔽相同的函数；3.可以设置冒泡和捕获。

IE  事件处理函数

IE 实现了与 DOM 中类似的两个方法：attachEvent()和 detachEvent()。这两个方法接受相同的参数：事件名称和函数

IE 中的 this 的指向在这里会出错，所以要使用window.event.srcElement。

区别：1.IE 不支持捕获，只支持冒泡；

          2.IE 添加事件不能屏蔽重复的函数；

          3.IE 中的 this 指向的是 window 而不是 DOM 对象。

          4.在传统事件上，IE 是无法接受到 event 对象的，但使用了 attchEvent()却可以，但有些区别