「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。

写在前面

• 最简版 my-jquery 在前面已经实现了接受选择器字符串为参数，接受原生 dom 为参数，接受函数为参数
• 这篇文章我们接着来实现其他功能

绑定多个事件

• 老规矩，我们先定义绑定多个事件的使用的方式

$(".btn").on("mouseover mousedown", () => {
  console.log("mouseover mousedown 触发");
});

• 在前面，我们已经实现了绑定单个事件，那么多个事件的绑定其实也很简单，直接循环所有事件进行绑定即可
• 下面是实现的 on 方法，用于绑定多个事件

on(eventName, fn) {
    let eventList = eventName.split(" ");
    eventList.forEach((eventStr) => {
      for (let i = 0; i < this.length; i++) {
        this[i].addEventListener(eventStr, fn);
      }
    });
}

• on 方法接收用空格连接的多个事件
• 由于需要绑定的 dom 元素可能有多个，因此在循环遍历所有事件的同时需要遍历一遍所有dom，才能完成多事件的绑定

链式调用

• 在 jquery 中，使用 eq 方法可以接受需要操作 dom 元素的编号，然后返回对应的 dom 元素
• 老规矩，我们先定义下使用

$(".btn")
  .eq(1)
  .eq(0)
  .on("click", function () {
    console.log("click");
  });

• eq 方法好实现，但是怎么才能做到链式调用呢？方法其实也很简单，每次方法执行完成之后，返回一个 JQ 实例即可，下面是具体实现
• 在前面已经实现了接受单个 dom 元素的情况，这里就可以直接使用了

节点回滚

• 在 jquery 中可以使用 end 方法进行操作节点的回滚，通常使用 eq 返回指定的对象后，可以使用 end 方法进行回滚
• 同样的，我们先定义使用方法

$(".btn")
  .eq(1)
  .end()
  .on("click", function () {
    console.log("点击");
  });

• 进行对象回滚，其实就是记录上一个操作的对象，回滚时直接返回上一个操作对象即可

constructor(arg, preObj) {
if (typeof preObj === "undefined") {
  this.preObj = [document];
} else {
  this.preObj = preObj;
}

// ...
}

eq(index) {
    return new Jq(this[index], this);
}

end() {
return this.preObj;
}

• 改造 eq 方法，实例化 eq 方法时，传入 this，表示的是当前操作对象
• 在 constructor 初始化时，增加一个参数 preObj，表示前一个操作对象，若实例化时，该参数有值时，存储起来，在 end 方法中返回

小结

• 至此，我们已经实现了 my-jquery 中多事件绑定，链式调用，以及操作节点回滚等功能
• 下篇文章我们接着实现对样式操作的一些功能

最后

• 今天的分享就到这里了，欢迎大家在评论区里面进行讨论 👏。
• 如果觉得文章写的不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰