如何将jQuery绑定onclick事件的代码转换为原生JavaScript实现

我来帮你把这段jQuery代码转换成等价的原生JavaScript，重点解决事件绑定和数据传递的问题。先理清楚原jQuery代码的核心逻辑：

• 找到所有.accordion-menu下的.dropdownlink元素
• 给这些元素绑定click事件，同时把当前Accordion实例的el作为事件数据传递给处理函数this.dropdown
• 事件触发时，dropdown方法可以通过event.data.el拿到实例的el，且方法内的this指向触发点击的元素

接下来一步步完善你的原生代码：

首先修正选择器错误 #

你代码里写的"\.dropdownlink"是错误的，原生JS的选择器不需要转义点号，直接写.dropdownlink就可以匹配类名为dropdownlink的元素。

正确传递上下文与实例数据 #

在jQuery中，on()方法的第二个参数可以传递自定义数据，原生JS里我们可以通过闭包或者call()/bind()来实现类似效果，确保dropdown方法既能访问到触发事件的元素，又能拿到Accordion实例的el。

完善后的完整代码 #

let Accordion = function (el) {
  this.el = el;
  let dropdownlink = [];
  const outers = document.querySelectorAll('.accordion-menu');
  
  // 收集所有目标元素，用Array.from转换伪数组更简洁
  for (let i = 0; i < outers.length; i++) {
    const elements_in_outer = outers[i].querySelectorAll('.dropdownlink');
    dropdownlink = dropdownlink.concat(Array.from(elements_in_outer));
  }

  // 保存当前Accordion实例的引用，方便在闭包中访问
  const accordionInstance = this;
  
  for (let i = 0, len = dropdownlink.length; i < len; i++) {
    dropdownlink[i].onclick = function (event) {
      // 调用dropdown方法，让方法内的this指向触发点击的元素（和jQuery行为一致）
      accordionInstance.dropdown.call(this, event);
    }
  }
};

// 假设你的dropdown方法是这样的（和原jQuery逻辑对齐）
Accordion.prototype.dropdown = function(event) {
  // 这里的this === 触发点击的.dropdownlink元素
  console.log('当前点击的元素:', this);
  // 如果需要直接访问Accordion实例的el，可以修改调用逻辑传递参数：
  // accordionInstance.dropdown.call(this, event, accordionInstance.el);
  // 然后方法接收两个参数：
  // Accordion.prototype.dropdown = function(event, instanceEl) {
  //   console.log('Accordion实例的el:', instanceEl);
  // }
};

更简洁的写法（使用addEventListener） #

用addEventListener比onclick更灵活，也能避免循环中的变量问题，推荐这种写法：

let Accordion = function (el) {
  this.el = el;
  // 一次性获取所有目标元素，选择器更简洁
  const dropdownLinks = document.querySelectorAll('.accordion-menu .dropdownlink');
  
  // 遍历绑定事件
  dropdownLinks.forEach(link => {
    link.addEventListener('click', (event) => {
      // 调用dropdown方法，保持上下文与jQuery一致
      this.dropdown.call(link, event);
    });
  });
};

// 对应的dropdown方法示例
Accordion.prototype.dropdown = function(event) {
  // this 指向触发点击的.dropdownlink元素
  // 如需访问Accordion实例的el，可直接作为参数传递：
  // this.dropdown.call(link, event, this.el);
};

关键注意点 #

1. 选择器语法：原生JS的querySelectorAll遵循CSS选择器语法，类选择器直接用.className，无需转义
2. 上下文控制：原jQuery中事件处理函数的this默认指向触发元素，原生JS可以通过call()来模拟这个行为
3. 数据传递：如果需要把实例的el传递给dropdown，可以通过闭包保存实例引用，或者直接作为参数传递给方法

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