Javascript和jquery事件--事件对象event

1、  事件对象event

对于event，js的解释是Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。而jq的解释是事件处理（事件对象、目标元素的获取，事件对象的属性、方法等）在不同浏览器之间存在差异，jQuery在遵循W3C规范的情况下做了封装统一。

你的网页需要兼容不同的浏览器，除了样式的不同外，更致命的就是事件对象的差异。使用console.log(e)，你就可以看到相关的参数。虽然jq已经对兼容进行过封装，但是我还是想进行了解，所以先看看关于js的事件对象。

(1) Js的事件对象event

A．通过event，可以获取到鼠标键盘这些设备的状态，如：

　　altKey, ctrlKey, metaKey, shiftKey这四个布尔值，获得的是事件发生时‘ALT’‘CTRL’‘META’‘SHIFT’键的状态。

　　PageX，PageY获得鼠标相对页面的位置。

　　clientX，clientY获得的是鼠标相对浏览器的位置。

　　screenX，screenY获得的是鼠标相对当前页面屏幕的位置

　　offsetX，offsetY是鼠标在触发事件的元素中的位置。

　　x，y等同screenX，screenY。

　　button获得鼠标点击的是哪个键，在谷歌浏览器中0-左键，1-滚轮,2-右键（当然右键事件浏览器有默认事件，下面可能会提到自定义右键事件）。

B．除此之外，还有一些比较有用的属性

　　cancelBubble，如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。和阻止冒泡相类似，但有所不同。

　　fromElement，toElement主要用于mouseover 和 mouseout 事件

　　keyCode，应该与keypress 事件，键盘事件有关，下文会研究。

　　returnValue 可以阻止事件继续触发，比如超链接，表单提交，和return false相关但有所差别

　　srcElement，target，触发事件的源头

　　currentTarget，绑定监听器的事件，和target的区别，比如，一个是最先冒泡的元素，一个可以是冒泡过程的任何一个元素。

　　timeStamp         返回事件生成的日期和时间。

　　type  返回当前 Event 对象表示的事件的名称。

　　bubbles     返回布尔值，指示事件是否是起泡事件类型。

　　eventPhase       返回事件传播的当前阶段。

　　initEvent() 初始化新创建的 Event 对象的属性。

　　preventDefault()       通知浏览器不要执行与事件关联的默认动作。

　　stopPropagation()     不再派发事件。

　　isTrusted属性返回一个布尔值，表示该事件是否为真实用户触发。用户触发的事件返回true，脚本触发的事件返回false。

　　stopImmediatePropagation()方法阻止同一个事件的其他监听函数被调用。

　　　　如果同一个节点对于同一个事件指定了多个监听函数，这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了stopImmediatePropagation方法，其他的监听函数就不会再执行了。

C．一些常用的兼容写法

　　获得event对象兼容性写法

　　　　var event = e||window.event

　　获得target兼容型写法

　　　　var target = event.target||event.srcElement

　　阻止浏览器默认行为兼容性写法

　　　　event.preventDefault ? event.preventDefault() : (event.returnValue = false);

　　阻止冒泡写法

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

(2)  Jq的事件对象

一些常用的属性

　　event.type：获取事件的类型，触发元素的事件类型

　　event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标，可以确定元素在当前页面的坐标值，是以页面为参考点,不随滑动条移动而变化

　　event.target：获取触发事件的元素

　　　js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

　　　　this和event.target都是dom对象，可以转换为jquery对象：$(this)和$(event.target)

　　event.which：获取在鼠标单击事件中鼠标的左、中、右键（左键1，中间键2，右键3），在键盘事件中键盘的键码值

　　event.currentTarget : 获取冒泡前的当前触发事件的DOM对象, 等同于this

　　event.preventDefault() ：阻止默认行为，可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了

　　event.stopPropagation() ：阻止事件冒泡，事件是可以冒泡的，为防止事件冒泡到DOM树上，不触发任何前辈元素上的事件处理函数，可以用 event.isPropagationStopped() 来确定stopPropagation是否被调用过了

参考：

https://www.cnblogs.com/wuln/p/6251486.html

https://www.cnblogs.com/songyaqi/p/5204143.html

https://blog.csdn.net/knock_me/article/details/79646105

https://blog.csdn.net/weixin_41342585/article/details/80659736

https://blog.csdn.net/baihuaxiu123/article/details/53148780（重要）

https://blog.csdn.net/u012528184/article/details/41724275

（returnVlaue=false和reture false）