javascript jquery css事件侦听器

javascript jquery css event listeners

本文关键字：侦听器 事件 css jquery javascript      更新时间：2023-09-26

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

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

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

从最坏到最佳实践的比例会是这样的吗：最差>HTML事件处理程序>CSS悬停事件>DOM事件处理程序>Level 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;
        }

使用CSS执行：悬停操作。使用JS进行点击思考。

由于您已经使用类：

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

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

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

对于点击do（在jQuery中）类似：

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


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

请注意，jQuery .hover()方法是：mouseenter和mouseleave事件的简写，您也可以像：一样使用它

$(".myspecial").hover(function(){
   // mouseenter stuff here
}, function(){
   // mouseleave stuff here
});
相关文章：