写在前面

在DOM事件中介绍过事件的相关信息，JS通过操作DOM元素执行事件，jQuery说白了就是一个在DOM基础上再次封装的库，DOM才是浏览器提供给JS的操作页面元素的对象。但DOM太基层，其语句很长、不好记、也不好用。因此jQuery将其再次封装，提供更好用的接口，这里对比DOM事件处理器来介绍jQuery事件处理器，对于DOM事件的介绍详看另一篇博客 DOM事件

注意这些API只能由jQuery元素使用，DOM元素不能使用，若想使用，则必须将DOM元素转化成jQuery元素，用$符号封装即可

1. 事件注册

on-event => event()

在DOM中添加事件处理器属性的on-event事件注册方法，在jQuery中封装成了对应的函数，事件名即函数名，参数是一个事件处理函数，但仍是事件注册器，如下所示：

  1. $("#target").click(function() {
  2.   alert("Handler for .click() called.");
  3. });

2. 事件监听

addEventListener() => on()

在DOM中事件监听器是addEventListener函数，在jQuery中就封装成了对象的on函数，但是on函数又有两种使用方法，一个是直接事件，一个是委托事件，直接事件就是和DOM中的addEventListener函数类似，常用的就是接受连个参数，一个是事件名，一个是事件处理函数。如下所示：

  1. $("#target").on("click", function(){
  2.     alert("Handler for .click() called");
  3. });

还可以传入事件处理构成的对象，如下所示：

  1. $("div.test").on({
  2.   click: function(){
  3.     $(this).toggleClass("active");
  4.   },
  5.   mouseenter: function(){
  6.     $(this).addClass("inside");
  7.   },
  8.   mouseleave: function(){
  9.     $(this).removeClass("inside");
  10. }

3. 事件委托

在DOM中使用事件委托的方法很复杂，需要通过接受到的事件event对象里的path属性值来精确判断是哪一个元素触发的该事件，但在jQuery中就比较简单了，那就是使用on接口的委托事件用法，如下：

on接受三个参数，一个是事件名，一个是真正要监听事件的子元素，一个是事件处理函数

  1. $("#dataTable tbody").on("click", "tr", function(event){
  2.   alert($(this).text());
  4.   //e.currentTarget === this === "tr"DOM节点
  5.   //$(e.currentTarget) === $(this)
  6.   //切记，箭头函数里没有this
  8.   alert($(e.currentTarget).index());
  9.   //可用index()直接查看自己是排行老几
  10. });

4. 事件

DOM的事件触发传递的event事件信息对象和jQuery的事件触发传递的event对象是不太一样的，比如DOM的事件event中就有path，jQuery的事件event中就没有。

都有target和currentTarget属性，target是一样的，都是真正点击的元素，在事件委托中是不准确的判断。

但是currentTarget属性二者都有，但是只有jQuery实现了，在jQuery的event对象中，currentTarget就是当前点击的DOM节点，也就是on函数参数里的子元素本身。

当然了，使用this可以吗？可以！e.currentTarget === this === DOM子节点

那为什么用到currentTarget，因为箭头函数里没有this