JS学习笔记Day11

一、什么是事件对象（黑匣子）

　　（一）事件：

　　　　onclick

　　　　ondblclick

　　（二）当绑定对象的事件被触发时，所发生的所有详细信息都会保存在一个地方，这个地方称为事件对象

　　　　

二、如何获取事件对象

　　（一）标准浏览器：给事件触发函数传递的第一个参数；

　　（二）IE浏览器：全局对象的属性window.event；

　　（三）兼容：evt = evt || window.event

　　　　　　　　var e = evt ||window.event

三、如何获取鼠标的编码值

　　（一）event.button

　　　　标准浏览器：左键：0；滚轮键：1；右键：2

　　　　IE9以下：左键：1；滚轮键：4；右键：2

　　　　兼容：

　　　　function getButton（evt）{

　　　　　　var e = evt || window.event；

　　　　　　if（evt）{

　　　　　　　　return e.button；

　　　　　　}else if（window.event）{

　　　　　　　　switch（e.button）{

　　　　　　　　　　case 1：return 0；

　　　　　　　　　　case 2：return 1；

　　　　　　　　　　case 3：return 2；

　　　　　　　　}

　　　　　　}

　　　　}

四、如何获取鼠标的坐标值

　　（一）相对坐标值：event.offsetX　　event.offsetY；相对鼠标所在对象上的坐标值

　　（二）绝对坐标值（页面坐标值）：event.pageX　　event.pageY；鼠标到页面的坐标值

　　（三）可视区坐标值：event.clientX　　event.clientY；鼠标到页面中可视区域的坐标值

　　（四）屏幕坐标值：event.screenX　　event.screenY；鼠标到电脑屏幕的坐标值

　　思考：如何实现鼠标跟随效果

五、什么是事件流，什么是事件冒泡

　　（一）事件流：指事件的流向，有三个阶段：事件捕获/事件目标/事件冒泡

　　（二）事件捕获：由外而内，由祖先元素向子孙元素一次传递事件的过程

　　（三）事件冒泡：由内而外，由子孙元素向祖先元素一次传递事件的过程

　　注：浏览器默认开启的是事件冒泡，IE与欧朋浏览器不支持事件捕获

　　（四）如何阻止事件冒泡

　　　　1.标准浏览器：event.stopPropagation（）

　　　　2.IE：eventcancelBubble = true；

　　　　兼容：event.stopPropagation ？ event.stopPropagation（） ： event.cancelBubble = true；

六、如何获取键盘的编码值

　　（一）event.keyCode event.charCode event.which

　　　　　onkeydown/onkeyup : 监听是整个键盘.

　　　　　event.keyCode : 获取整个键盘的编码值,字母只获取大写的编码值.,

　　　　　onkeypress : 监听除功能键外的键盘值

　　兼容 : event.keyCode || event.charCode || event.which

　　　　火狐:

　　　　　event.keyCode : 0,

　　　　　event.charCode : 大小写字母的编码值,

　　　　　event.which : 大小写字母的编码值,

　　　　谷歌:

　　　　　event.keyCode : 大小写字母的编码值,

　　　　　event.charCode : 大小写字母的编码值,

　　　　　event.which : 大小写字母的编码值,

七、如何设置组合键（快捷键）

　　（一）event.ctrlKey

　　（二）event.shiftKey

　　（三）event.altKey