将jQuery鼠标交互代码转为原生JavaScript遇错，请求排查

我正尝试将一段实现图片鼠标交互的jQuery代码转换为原生JavaScript代码，但部分方法的转换存在问题。以下是原jQuery代码及我尝试编写的JavaScript代码，请帮忙指出其中的错误：

原jQuery代码 #

jQuery('.image').click(function() {
  jQuery(this).toggleClass('normal-zoom zoom-in');
});

jQuery('.image').on('mousemove', function(event) {

  var bbox = event.target.getBoundingClientRect();
  var mouseX = event.clientX - bbox.left;
  var mouseY = event.clientY - bbox.top;
  var xPercent = (mouseX / bbox.width) * 100;
  var yPercent = (mouseY / bbox.height) * 100;

  jQuery(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );

});

jQuery('.image').on('mouseenter', function() {
  jQuery(this).addClass('zoom-in');
  jQuery(this).removeClass('normal-zoom');
});

jQuery('.image').on('mouseleave', function() {
  jQuery(this).addClass('normal-zoom');
  jQuery(this).removeClass('zoom-in');
});

尝试编写的原生JavaScript代码 #

document.querySelector('.image').onclick = function() {
  document.querySelector(this).classList.toggle('normal-zoom zoom-in');
};

document.querySelector('.image').addEventListener('mousemove', function(event) {

  var bbox = event.target.getBoundingClientRect();
  var mouseX = event.clientX - bbox.left;
  var mouseY = event.clientY - bbox.top;
  var xPercent = (mouseX / bbox.width) * 100;
  var yPercent = (mouseY / bbox.height) * 100;

  document.querySelector(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );

});

document.querySelector('.image').addEventListener('mouseenter', function() {
  document.querySelector(this).classList.add('zoom-in');
  document.querySelector(this).classList.remove('normal-zoom');
});

document.querySelector('.image').addEventListener('mouseleave', function() {
  document.querySelector(this).classList.add('normal-zoom');
  document.querySelector(this).classList.remove('zoom-in');
});

错误点分析 #

• 错误使用document.querySelector(this)：事件回调中的this已经是触发事件的DOM元素，document.querySelector()接收的是选择器字符串，不能传入DOM元素。直接使用this即可，无需再次查询。
• classList.toggle不支持多类名同时切换：jQuery的toggleClass('a b')可以一次性切换多个类，但原生classList.toggle()每次只能处理单个类名。要实现相同效果，需要分别对两个类调用toggle，或者手动判断类的存在状态来添加/移除。
• 原生JS没有.css()方法：jQuery的.css()是封装的方法，原生JS需要通过element.style.transformOrigin或者element.style.setProperty('transform-origin', 值)来设置行内样式。
• querySelector仅匹配第一个元素：原jQuery代码会选中所有.image元素并绑定事件，但document.querySelector()只返回第一个匹配的元素。要给所有目标元素绑定事件，需要用document.querySelectorAll('.image')遍历每个元素进行绑定。

修正后的原生JavaScript代码 #

// 获取所有.image元素
const images = document.querySelectorAll('.image');

// 遍历绑定事件
images.forEach(image => {
  // 点击事件
  image.addEventListener('click', function() {
    this.classList.toggle('normal-zoom');
    this.classList.toggle('zoom-in');
  });

  // 鼠标移动事件
  image.addEventListener('mousemove', function(event) {
    const bbox = this.getBoundingClientRect();
    const mouseX = event.clientX - bbox.left;
    const mouseY = event.clientY - bbox.top;
    const xPercent = (mouseX / bbox.width) * 100;
    const yPercent = (mouseY / bbox.height) * 100;

    this.style.transformOrigin = `${xPercent}% ${yPercent}%`;
  });

  // 鼠标进入事件
  image.addEventListener('mouseenter', function() {
    this.classList.add('zoom-in');
    this.classList.remove('normal-zoom');
  });

  // 鼠标离开事件
  image.addEventListener('mouseleave', function() {
    this.classList.add('normal-zoom');
    this.classList.remove('zoom-in');
  });
});

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