javascript - jQuery 中如何绑定(bind)多个事件

Question

我尝试在 jQuery 中绑定(bind)多个事件。

例如，在下面的代码片段中，我定义了 2 个函数，它们在 eventhander 中使用。

我尝试了这段代码，但效果不佳。

我想知道哪里必须修复。

如果有人有意见请告诉我。

谢谢

function outpatient(elm) {
  elm.removeClass().addClass(style1);
}

function hover(elm) {
  elm.addClass(style2);
}

$("#calendar .day").on("click　hover", function(event) {
  if (event.type == "click") {
    outpatient($(this))
  } else {
    hover($(this))
  }
});

td {
  padding: 10px;
  border: solid black 1px;
}

table {
  border-collapse: collapse;
}

.is-clicked {
  background-color: aqua;
}

.style1 {
  background-color: red;
}

.style2 {
  background-color: aqua;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>
  <table>
    <tr>
      <td id=1 class=day>1</td>
      <td id=2 class=day>2</td>
      <td id=3 class=day>3</td>
      <td id=4 class=day>4</td>
      <td id=5 class=day>5</td>
      <td id=6 class=day>6</td>
      <td id=7 class=day>7</td>
    </tr>
  </table>
</div>

Answer 1

监听 mouseenter 事件，没有 hover 事件:

function outpatient(elm) {
  elm.removeClass().addClass('style1');
}

function hover(elm) {
  elm.addClass('style2');
}

$("#calendar .day").on("click mouseenter", function(event) {
  if (event.type == "click") {
    outpatient($(this))
  } else {
    hover($(this))
  }
});

td {
  padding: 10px;
  border: solid black 1px;
}

table {
  border-collapse: collapse;
}

.is-clicked {
  background-color: aqua;
}

.style1 {
  background-color: red;
}

.style2 {
  background-color: aqua;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>
  <table>
    <tr>
      <td id=1 class=day>1</td>
      <td id=2 class=day>2</td>
      <td id=3 class=day>3</td>
      <td id=4 class=day>4</td>
      <td id=5 class=day>5</td>
      <td id=6 class=day>6</td>
      <td id=7 class=day>7</td>

    </tr>
  </table>
</div>