js中的事件（上）

1、什么是事件

　　是指用户在某事务上由于某种行为所执行的操作; （对页面元素的某种操作）

2、 事件的三要素

　　事件源：是指在哪个元素引发的事件，如：a标签、div标签

　　事件：事件是指执行的动作

　　　　如：单击、双击等

　　事件驱动程序（事件处理程序）：即执行的结果

　　　　如：单击button标签所执行的函数

3、event

　　event对象，被称为事件对象。

　　因此它只会在发生一个事件时可用。不同的事件产生的事件对象不同  

　　存在兼容 ： 

　　　　在IE中，获取event对象：

　　　　　　xxx.onclick = function(){

    　　　　　　 alert(window.event);

　　　　　　}

　　在非IE浏览器，获取event对象，用传参的方式：

　　　　xxx.onclick = function(e){

   　　　　  console.log(e)

    　　兼容问题 ： e = e || window.event

　　　　}

4、event.button属性介绍

　　button属性 ： 用来确认用户操作的是左键   滚轮   右键

　　左键  0

　　滚轮  1

　　右键  2  

5、 event.clientX、event.clientY   event.pageX、event.pageY   event.offsetX、event.offsetY

　　event.clientX、event.clientY
　　鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条

　　event.pageX、event.pageY 

　　它们使用的是文档坐标而非窗口坐标，也就是鼠标到页面的距离

　　event.offsetX、event.offsetY

　　鼠标到盒子本身的距离

 

6、键盘事件

　　1、onkeydown :键盘按下触发事件，功能键也能识别（shift  / ctrl / alt）;不能识别大小写；

　　2、onkeyup : 键盘弹起触发事件；也能识别功能键  不能识别大小写

　　3、onkeypress:键盘按下触发事件，不能识别功能键的keyCode；能识别大小写；

7、组合键ctrlKey、altKey

　　ctrlKey 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下

　　altKey 事件属性返回一个布尔值。指示在指定的事件发生时，Alt 键是否被按下

8、keyCode/which兼容

　　keyCode/which   获取键盘的按键值

　　IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。但是， keyCode 属性在 Firefox 浏览器的 　　onkeypress 事件中是无效的。 兼容这些浏览器你可以使用以下代码

　　var x = event.which || event.keyCode;   使用 which 或 keyCode, 这样可支持不同浏览器

　　注意： 在onkeypress事件中， 如果按住ctrl + 回车   ，此时，回车键的keyCode的值为10 

9、事件流

　　当产生某个事件时，事件从子元素向父元素触发或从父元素向子元素触发的过程 称为事件流

　　事件流的两种模式 ：

   　　 事件冒泡  ---  从子元素向父元素触发  small ---> big --> body ---> document ---> window

　　    事件捕获  ---  从父元素向子元素触发  window -- > document --- > body --- > big --> smal

10、事件冒泡

　　事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签

　　阻止事件冒泡兼容：

　　　　 e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;