事件对象的使用 (jQuery)

1jQuery事件对象的做用

事件中的Event对象容易被初学者忽略掉，可能大多时候初学者不知道怎么去用它，但有些时候它仍是很是有用的

一个标准的"click"点击事件

$(elem).on("click",function(event){
   event //事件对象
})

在不一样浏览器之间事件对象的获取, 以及事件对象的属性都有差别。jQuery根据 W3C 标准规范了事件对象，因此在jQuery事件回调方法中获取到的事件对象是通过兼容后处理过的一个标准的跨浏览器对象

这里不在千篇一概的说方法的使用，经过实际的一个小案例，从而来了解事件对象的做用

<ul>
    <li class="even1"></li>
    <li class="even2"></li>
    <li class="even2"></li>
    .........
</ul>

ul有N个子元素li(这里只写了3个)，若是我要响应每个li的事件，那么常规的方法就是须要给全部的li都单独绑定一个事件监听，这样写法很符合逻辑，可是同时有显得繁琐

由于li都有一个共同的父元素，并且全部的事件都是一致的，这里咱们能够采用要一个技巧来处理，也是常说的"事件委托"

事件没直接和li元素发生关系，并且绑定父元素了。因为浏览器有事件冒泡的这个特性，咱们能够在触发li的时候把这个事件往上冒泡到ul上，由于ul上绑定事件响应因此就可以触发这个动做了。惟一的问题怎么才知道触发的li元素是哪一个一个？

这里就引出了事件对象了

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，而且只能是事件处理函数内部访问，在全部事件处理函数运行结束后，事件对象就被销毁

回到上面的问题，既然事件对象是跟当前触发元素息息相关的，因此咱们就能从里面相关的信息，从事件对象中找到 event.target

event.target

target 属性能够是注册事件时的元素，或者它的子元素。一般用于比较 event.target 和 this 来肯定事件是否是因为冒泡而触发的。常常用于事件冒泡时处理事件委托

简单来讲：event.target表明当前触发事件的元素，能够经过当前元素对象的一系列属性来判断是否是咱们想要的元素

2jQuery事件对象的属性和方法

事件对象的属于与方法有不少，可是咱们常常用的只有那么几个，这里我主要说下做用与区别

event.type：获取事件的类型

触发元素的事件类型

$("a").click(function(event) {
  alert(event.type); // "click"事件
});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

经过这2个属性，能够肯定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来讲是从页面左上角开始,便是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法：阻止默认行为

这个用的特别多，在执行这个方法后，若是点击一个连接（a标签），浏览器不会跳转到新的 URL 去了。咱们能够用 event.isDefaultPrevented() 来肯定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() 方法：阻止事件冒泡

事件是能够冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪一个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程当中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：

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

.this和event.target都是dom对象

若是要使用jquey中的方法能够将他们转换为jquery对象。好比this和$(this)的使用、event.target和$(event.target)的使用；