[jQuery教程]jQuery事件对象的使用（十三）

介绍事件对象的概念和作用，掌握对象的属性及使用方法。

jQuery 事件对象的作用

事件中的 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 代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素。

jQuery 事件对象的属性和方法

事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别。

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)的使用；

以上关于[jQuery教程]jQuery事件对象的使用（十三）的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。