鼠标悬停切换表单图片按钮失效，如何精准定位指定input？

在网站表单中使用<input type="image">作为按钮，实现鼠标悬停切换图片的功能。原本的独立演示代码运行正常，但整合到完整表单后失效，推测是因为原脚本用getElementsByTagName('input')选中了表单内所有input元素，干扰了功能。需要精准定位目标input元素，避免影响其他表单控件。

原代码示例：

var inputs = document.getElementsByTagName('input');
for (var i = 0, len = inputs.length; i < len; i++) {
  input = inputs[i];
  input.onmouseover = function() {
    this.setAttribute('data-orig-image', this.getAttribute('src'));
    this.src = this.getAttribute('data-alt-image');
  };
  input.onmouseout = function() {
    this.src = this.getAttribute('data-orig-image');
  };
}

<input type="image" src="/images/image1.png" data-alt-image="/images/image2.png" />

方案1：使用类选择器精准定位 #

给目标图片按钮添加专属类名，仅对带有该类的元素绑定事件：

修改后的HTML #

<input type="image" class="image-btn" src="/images/image1.png" data-alt-image="/images/image2.png" />

修改后的JS #

var imageButtons = document.getElementsByClassName('image-btn');
for (var i = 0, len = imageButtons.length; i < len; i++) {
  var btn = imageButtons[i];
  btn.onmouseover = function() {
    // 避免重复存储原始图片地址
    if (!this.getAttribute('data-orig-image')) {
      this.setAttribute('data-orig-image', this.src);
    }
    this.src = this.getAttribute('data-alt-image');
  };
  btn.onmouseout = function() {
    this.src = this.getAttribute('data-orig-image');
  };
}

方案2：使用属性选择器定位 #

利用type="image"和data-alt-image属性组合筛选，只对具备这两个属性的input元素生效：

修改后的JS #

var imageButtons = document.querySelectorAll('input[type="image"][data-alt-image]');
// 现代浏览器可直接用forEach遍历，旧浏览器可替换为for循环
imageButtons.forEach(function(btn) {
  btn.addEventListener('mouseover', function() {
    if (!this.dataset.origImage) {
      this.dataset.origImage = this.src;
    }
    this.src = this.dataset.altImage;
  });
  btn.addEventListener('mouseout', function() {
    this.src = this.dataset.origImage;
  });
});

注：dataset是HTML5新增的属性，可直接访问元素的data-*属性，比getAttribute更简洁直观。

方案3：使用ID选择器（单元素场景） #

如果页面中只有一个图片按钮，给它添加唯一ID，直接定位单个元素：

修改后的HTML #

<input type="image" id="form-submit-btn" src="/images/image1.png" data-alt-image="/images/image2.png" />

修改后的JS #

var btn = document.getElementById('form-submit-btn');
btn.onmouseover = function() {
  if (!this.dataset.origImage) {
    this.dataset.origImage = this.src;
  }
  this.src = this.dataset.altImage;
};
btn.onmouseout = function() {
  this.src = this.dataset.origImage;
};

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