javascript - 嵌套事件是 Javascript/JQuery 中的良好实践吗？

Question

是否有更有效的方法来更改 mouseout单击按钮时的状态？ 单击按钮时，我希望单击事件中的图像优先于鼠标悬停事件中的图像。 以下代码有效，但我不确定嵌套事件是否是一个好的做法。

$("#targetBtn").on({
   "mouseover" : function() {
      document.querySelector('#targetBtn img').src = 'images/_hover.png';
    },
    "mouseout" : function() {
      document.querySelector('#targetBtn img').src = 'images/_mouseout.png';
    },
    "click" : function() {
      document.querySelector('#targetBtn img').src = 'images/_selected.png';
      $(this).mouseout(function() {
          document.querySelector('#targetBtn img').src = 'images/_selected.png';
      });
    }
});

如果有人可以重构这段代码并向我展示更好的方法，我将不胜感激。另外，如果有人可以解释为什么嵌套事件不好(如果确实如此)，我也会很感激。

Answer 1

通过在单击元素时添加 selected 类可以简化此操作。

当前的问题是每次发生单击时您都将添加新的 mouseout 事件处理程序。新的不删除旧的

以下内容将在悬停事件期间更改图像之前检查所选类是否存在

$("#targetBtn").on({
  "mouseover": function() {
    if (!$(this).hasClass('selected')) {
      $(this).find('img').attr('src ', 'images/_hover.png');
    }

  },
  "mouseout": function() {
    if (!$(this).hasClass('selected')) {
      $(this).find('img').attr('src ', 'images/_mouseout.png');
    }

  },
  "click": function() {
    $(this).toggleClass('selected');
    var imgSrc = $(this).hasClass('selected') ? 'images/_selected.png' : 'images/_hover.png';
    $(this).find('img').attr('src ', imgSrc);

  }
});