如何在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

而是監聽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>

Answer 2

您可以通過傳遞一個對象作為鍵，其中包含您想要偵聽的事件，以及您想要在調用時執行的相關函數，從而稍微簡化您的代碼。 您可以使用$(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>