javascript jquery css 事件侦听器

Question

我正在阅读 Jon Ducket 的 JavaScript 和 JQuery，他非常清楚地表明使用 HTML 事件处理程序是不好的做法（第 250 页）。

在我的示例项目中，我只是尝试根据鼠标悬停、鼠标移开和单击来更改一些 div 的颜色。

我的朋友说我应该使用 CSS 来完成此操作，但我使用了 jQuery。 CSS 方法是否包含在 HTML 事件处理程序的类别中？

从最差到最佳实践的比例是否如下所示：最差 > HTML 事件处理程序 > CSS 悬停事件 > DOM 事件处理程序 > 2 级 DOM 事件侦听器 > 最佳

我应该只对鼠标事件使用 CSS 还是 JQuery 更好？

这是HTML：

      <div>
          <br>
        <div class="myspecial" id="optionADiv">A</div>
        <div class="myspecial" id="optionBDiv">B</div>
        <div class="myspecial" id="optionCDiv">C</div>
        <div class="myspecial" id="optionDDiv">D</div>
      </div>

这是Javascript：

$("#optionADiv").mouseover(function() {
    $("#optionADiv").addClass("highlight");
});

$("#optionADiv").mouseout(function() {
    $("#optionADiv").removeClass("highlight");
});

$("#optionBDiv").mouseover(function() {
    $("#optionBDiv").addClass("highlight");
});

$("#optionBDiv").mouseout(function() {
    $("#optionBDiv").removeClass("highlight");
});

$("#optionCDiv").mouseover(function() {
    $("#optionCDiv").addClass("highlight");
});

$("#optionCDiv").mouseout(function() {
    $("#optionCDiv").removeClass("highlight");
});

$("#optionDDiv").mouseover(function() {
    $("#optionDDiv").addClass("highlight");
});

$("#optionDDiv").mouseout(function() {
    $("#optionDDiv").removeClass("highlight");
});

这是相关的 CSS:

    .myspecial {
        padding: 100px;
        height: 100px;
        width: 100px;
        background-color: red;
        border: 10px solid #c40909;
        display: inline-block;
        }

    .highlight {
        background-color: #c40909;
        }

    .clicked {
        background-color: #a22b2b;
        }

Answer 1

使用 CSS 执行 :hover 操作。用JS做点击思考

因为您已经在使用类:

$(".myspecial").hover(function(){
   $(this).toggleClass("highlight");
});

将执行此操作，而不是您使用的所有 jQuery 代码。
在 CSS 中很简单：

.myspecial:hover{
   /* your styles here */
}

对于点击（在 jQuery 中），例如：

$(".myspecial").click(function(){
   $(this).toggleClass("clicked");
});

/* CSS: clicked class added by jQuery on click */
.clicked{
   /* your clicked styles here */
}

请注意，jQuery .hover() 方法是 shorthand 两个事件：mouseenter 和 mouseleave 事件，您也可以像这样使用它：

$(".myspecial").hover(function(){
   // mouseenter stuff here
}, function(){
   // mouseleave stuff here
});

javascript jquery css 事件侦听器

javascript jquery css event listeners

javascript

jquery

css

mouseevent

event-listener