Как связать несколько событий в jQuery

Question

Я пытался связать несколько событий в jQuery.

Например, в приведенном ниже фрагменте я определил 2 functions, и они используются в 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

Вы можете немного упростить свой код, передавая объект с событиями, которые вы хотите прослушивать, в качестве ключей, и связанные с ними функции, которые вы хотите выполнять при вызове. Вы можете использовать $(this) для ссылки на элемент, запускающий событие в ваших функциях:

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

function hover() {
  $(this).addClass('style2');
}

$("#calendar .day").on({
  mouseenter: hover, /* mouseover or mouseenter for hover */
  click: outpatient
});

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 2

Вместо этого слушайте событие 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>