标签：编码 鼠标 笔记 JS 事件 坐标值 evt event 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

标签：编码,鼠标,笔记,JS,事件,坐标值,evt,event,Day11
来源： https://www.cnblogs.com/liufuyuan/p/10394669.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。