如何用jQuery的bind和unbind替代类元素的on click事件

嘿，我来帮你搞定轮播按钮用bind/unbind处理点击事件的需求！首先得理清一个关键点：原生JavaScript里没有直接用来绑定/解绑事件的bind/unbind方法——你说的bind更多是用来调整函数的this指向，事件绑定和解绑要靠addEventListener和removeEventListener；如果是用jQuery的话，确实有.bind()和.unbind()的事件绑定API。我两种场景都给你梳理解决方案：

一、原生JavaScript实现（结合bind调整this指向） #

假设你的轮播HTML结构大概是这样：

<div id="slide">
  <div class="slide-item active">轮播页1</div>
  <div class="slide-item">轮播页2</div>
  <div class="slide-item">轮播页3</div>
  <button class="prev-btn">上一页</button>
  <button class="next-btn">下一页</button>
</div>

对应的JS代码可以这么写：

// 获取轮播容器和按钮
const slideContainer = document.querySelector('#slide');
const prevBtn = slideContainer.querySelector('.prev-btn');
const nextBtn = slideContainer.querySelector('.next-btn');
let currentSlide = 1;
const totalSlides = slideContainer.querySelectorAll('.slide-item').length;

// 定义轮播切换逻辑，用bind把this绑定到轮播容器
function switchToPrev() {
  currentSlide = currentSlide > 1 ? currentSlide - 1 : totalSlides;
  // 更新轮播状态（这里是切换active类，你可以替换成自己的轮播逻辑）
  this.querySelector('.slide-item.active').classList.remove('active');
  this.querySelector(`.slide-item:nth-child(${currentSlide})`).classList.add('active');
}

function switchToNext() {
  currentSlide = currentSlide < totalSlides ? currentSlide + 1 : 1;
  this.querySelector('.slide-item.active').classList.remove('active');
  this.querySelector(`.slide-item:nth-child(${currentSlide})`).classList.add('active');
}

// 绑定this并保存函数引用（非常关键！解绑事件必须用同一个函数引用）
const boundPrevHandler = switchToPrev.bind(slideContainer);
const boundNextHandler = switchToNext.bind(slideContainer);

// 绑定点击事件
prevBtn.addEventListener('click', boundPrevHandler);
nextBtn.addEventListener('click', boundNextHandler);

// 解绑事件的方法（比如需要暂停轮播时调用）
function unbindSlideEvents() {
  prevBtn.removeEventListener('click', boundPrevHandler);
  nextBtn.removeEventListener('click', boundNextHandler);
}

二、jQuery版本（直接用bind/unbind） #

如果你的项目依赖jQuery，那可以直接用它的.bind()和.unbind()方法：

const $slideContainer = $('#slide');
const $prevBtn = $slideContainer.find('.prev-btn');
const $nextBtn = $slideContainer.find('.next-btn');
let currentSlide = 1;
const totalSlides = $slideContainer.find('.slide-item').length;

// 定义轮播切换逻辑
function switchToPrev() {
  currentSlide = currentSlide > 1 ? currentSlide - 1 : totalSlides;
  $(this).find('.slide-item.active').removeClass('active');
  $(this).find(`.slide-item:nth-child(${currentSlide})`).addClass('active');
}

function switchToNext() {
  currentSlide = currentSlide < totalSlides ? currentSlide + 1 : 1;
  $(this).find('.slide-item.active').removeClass('active');
  $(this).find(`.slide-item:nth-child(${currentSlide})`).addClass('active');
}

// 用bind绑定事件，同时用$.proxy把this绑定到轮播容器
$prevBtn.bind('click', $.proxy(switchToPrev, $slideContainer[0]));
$nextBtn.bind('click', $.proxy(switchToNext, $slideContainer[0]));

// 解绑事件的方法
function unbindSlideEvents() {
  $prevBtn.unbind('click', $.proxy(switchToPrev, $slideContainer[0]));
  $nextBtn.unbind('click', $.proxy(switchToNext, $slideContainer[0]));
}

重要提醒 #

• 原生JS里，bind()会返回一个全新的函数，所以必须保存这个新函数的引用，否则removeEventListener找不到要解绑的事件。
• 如果你的页面有多个轮播实例（比如用querySelectorAll('#slide')选中了多个容器），记得要循环遍历每个容器，分别绑定对应按钮的事件，避免事件逻辑混乱。

内容的提问来源于stack exchange，提问作者HELP