jsday11

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 --> small

 

10.事件冒泡

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

阻止事件冒泡兼容：

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

转载于:https://www.cnblogs.com/cqdd/p/10233929.html