JavaScriptのマウスイベント一覧【サンプル付き】

1. JavaScript
2022/03/04

それぞれの違いをよく忘れるので、自分用メモ。

mousedown

&#x3C;div class="wrapper">
  &#x3C;p class="message">・・・&#x3C;/p>
  &#x3C;svg class="mouse-area" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    &#x3C;circle fill="#FFCC4D" cx="18" cy="18" r="18" />
    &#x3C;path fill="#664500" d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z" />
    &#x3C;path fill="#FFF" d="M9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
    &#x3C;ellipse fill="#664500" cx="12" cy="13.5" rx="2.5" ry="3.5" />
    &#x3C;ellipse fill="#664500" cx="24" cy="13.5" rx="2.5" ry="3.5" />
  &#x3C;/svg>
&#x3C;/div>

&#x3C;style>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 85vh;
  }

  .message {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5em 1em;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #333;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 5px;
  }

  .message::before,
  .message::after {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .message::before {
    background-color: #333;
  }

  .message::after {
    bottom: -6px;
    background-color: #fff;
  }

  .mouse-area {
    margin-top: 5px;
    width: 70px;
    height: 70px;
  }
&#x3C;/style>

&#x3C;script>
  const message = document.querySelector(".message");
  const mouseArea = document.querySelector(".mouse-area");

  mouseArea.addEventListener("mousedown", () => {
    message.innerText = "要素の中でマウスをクリックしました。";
  });
&#x3C;/script>

mousedownは要素の中でマウスをクリックするとイベントが発生します。

mouseup

&#x3C;div class="wrapper">
  &#x3C;p class="message">・・・&#x3C;/p>
  &#x3C;svg class="mouse-area" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    &#x3C;circle fill="#FFCC4D" cx="18" cy="18" r="18" />
    &#x3C;path fill="#664500" d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z" />
    &#x3C;path fill="#FFF" d="M9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
    &#x3C;ellipse fill="#664500" cx="12" cy="13.5" rx="2.5" ry="3.5" />
    &#x3C;ellipse fill="#664500" cx="24" cy="13.5" rx="2.5" ry="3.5" />
  &#x3C;/svg>
&#x3C;/div>

&#x3C;style>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 85vh;
  }

  .message {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5em 1em;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #333;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 5px;
  }

  .message::before,
  .message::after {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .message::before {
    background-color: #333;
  }

  .message::after {
    bottom: -6px;
    background-color: #fff;
  }

  .mouse-area {
    margin-top: 5px;
    width: 70px;
    height: 70px;
  }
&#x3C;/style>

&#x3C;script>
  const message = document.querySelector(".message");
  const mouseArea = document.querySelector(".mouse-area");

  mouseArea.addEventListener("mouseup", () => {
    message.innerText = "要素の中でマウスのクリックを離しました。";
  });
&#x3C;/script>

mouseupは要素の中でマウスのクリックを離すとイベントが発生します。

mousemove

&#x3C;div class="wrapper">
  &#x3C;p class="message">・・・&#x3C;/p>
  &#x3C;svg class="mouse-area" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    &#x3C;circle fill="#FFCC4D" cx="18" cy="18" r="18" />
    &#x3C;path fill="#664500" d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z" />
    &#x3C;path fill="#FFF" d="M9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
    &#x3C;ellipse fill="#664500" cx="12" cy="13.5" rx="2.5" ry="3.5" />
    &#x3C;ellipse fill="#664500" cx="24" cy="13.5" rx="2.5" ry="3.5" />
  &#x3C;/svg>
&#x3C;/div>

&#x3C;style>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 85vh;
  }

  .message {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5em 1em;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #333;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 5px;
  }

  .message::before,
  .message::after {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .message::before {
    background-color: #333;
  }

  .message::after {
    bottom: -6px;
    background-color: #fff;
  }

  .mouse-area {
    margin-top: 5px;
    width: 70px;
    height: 70px;
  }
&#x3C;/style>

&#x3C;script>
  const message = document.querySelector(".message");
  const mouseArea = document.querySelector(".mouse-area");

  mouseArea.addEventListener("mousemove", () => {
    message.innerText = "要素の中でマウスを動かしました。";
  });
&#x3C;/script>

mousemoveは要素の中でマウスを動かすとイベントが発生します。

mouseenter

&#x3C;div class="wrapper">
  &#x3C;p class="message">・・・&#x3C;/p>
  &#x3C;svg class="mouse-area" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    &#x3C;circle fill="#FFCC4D" cx="18" cy="18" r="18" />
    &#x3C;path fill="#664500" d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z" />
    &#x3C;path fill="#FFF" d="M9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
    &#x3C;ellipse fill="#664500" cx="12" cy="13.5" rx="2.5" ry="3.5" />
    &#x3C;ellipse fill="#664500" cx="24" cy="13.5" rx="2.5" ry="3.5" />
  &#x3C;/svg>
&#x3C;/div>

&#x3C;style>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 85vh;
  }

  .message {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5em 1em;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #333;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 5px;
  }

  .message::before,
  .message::after {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .message::before {
    background-color: #333;
  }

  .message::after {
    bottom: -6px;
    background-color: #fff;
  }

  .mouse-area {
    margin-top: 5px;
    width: 70px;
    height: 70px;
  }
&#x3C;/style>

&#x3C;script>
  const message = document.querySelector(".message");
  const mouseArea = document.querySelector(".mouse-area");

  mouseArea.addEventListener("mouseenter", () => {
    message.innerText = "要素の中にマウスが移動しました。";
  });
&#x3C;/script>

mouseenterは要素の中にマウスが移動するとイベントが発生します。

mouseleave

&#x3C;div class="wrapper">
  &#x3C;p class="message">・・・&#x3C;/p>
  &#x3C;svg class="mouse-area" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    &#x3C;circle fill="#FFCC4D" cx="18" cy="18" r="18" />
    &#x3C;path fill="#664500" d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z" />
    &#x3C;path fill="#FFF" d="M9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
    &#x3C;ellipse fill="#664500" cx="12" cy="13.5" rx="2.5" ry="3.5" />
    &#x3C;ellipse fill="#664500" cx="24" cy="13.5" rx="2.5" ry="3.5" />
  &#x3C;/svg>
&#x3C;/div>

&#x3C;style>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 85vh;
  }

  .message {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5em 1em;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #333;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 5px;
  }

  .message::before,
  .message::after {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .message::before {
    background-color: #333;
  }

  .message::after {
    bottom: -6px;
    background-color: #fff;
  }

  .mouse-area {
    margin-top: 5px;
    width: 70px;
    height: 70px;
  }
&#x3C;/style>

&#x3C;script>
  const message = document.querySelector(".message");
  const mouseArea = document.querySelector(".mouse-area");

  mouseArea.addEventListener("mouseleave", () => {
    message.innerText = "要素の外にマウスが移動しました。";
  });
&#x3C;/script>

mouseleaveは要素の外にマウスが移動するとイベントが発生します。

mouseover

&#x3C;div class="wrapper">
  &#x3C;p class="message">・・・&#x3C;/p>
  &#x3C;svg class="mouse-area" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    &#x3C;circle fill="#FFCC4D" cx="18" cy="18" r="18" />
    &#x3C;path fill="#664500" d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z" />
    &#x3C;path fill="#FFF" d="M9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
    &#x3C;ellipse fill="#664500" cx="12" cy="13.5" rx="2.5" ry="3.5" />
    &#x3C;ellipse fill="#664500" cx="24" cy="13.5" rx="2.5" ry="3.5" />
  &#x3C;/svg>
&#x3C;/div>

&#x3C;style>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 85vh;
  }

  .message {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5em 1em;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #333;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 5px;
  }

  .message::before,
  .message::after {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .message::before {
    background-color: #333;
  }

  .message::after {
    bottom: -6px;
    background-color: #fff;
  }

  .mouse-area {
    margin-top: 5px;
    width: 70px;
    height: 70px;
  }
&#x3C;/style>

&#x3C;script>
  const message = document.querySelector(".message");
  const mouseArea = document.querySelector(".mouse-area");

  mouseArea.addEventListener("mouseover", () => {
    message.innerText = "要素の上をマウスが移動しました。";
  });
&#x3C;/script>

mouseoverは要素の上をマウスが移動するとイベントが発生します。

mouseenterと違い、こちらはバブリングします。

mouseout

&#x3C;div class="wrapper">
  &#x3C;p class="message">・・・&#x3C;/p>
  &#x3C;svg class="mouse-area" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    &#x3C;circle fill="#FFCC4D" cx="18" cy="18" r="18" />
    &#x3C;path fill="#664500" d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z" />
    &#x3C;path fill="#FFF" d="M9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
    &#x3C;ellipse fill="#664500" cx="12" cy="13.5" rx="2.5" ry="3.5" />
    &#x3C;ellipse fill="#664500" cx="24" cy="13.5" rx="2.5" ry="3.5" />
  &#x3C;/svg>
&#x3C;/div>

&#x3C;style>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 85vh;
  }

  .message {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5em 1em;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #333;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 5px;
  }

  .message::before,
  .message::after {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .message::before {
    background-color: #333;
  }

  .message::after {
    bottom: -6px;
    background-color: #fff;
  }

  .mouse-area {
    margin-top: 5px;
    width: 70px;
    height: 70px;
  }
&#x3C;/style>

&#x3C;script>
  const message = document.querySelector(".message");
  const mouseArea = document.querySelector(".mouse-area");

  mouseArea.addEventListener("mouseout", () => {
    message.innerText = "要素の外にマウスが移動しました。";
  });
&#x3C;/script>

mouseoutは要素の外にマウスが移動するとイベントが発生します。

mouseleaveと違い、こちらはバブリングします。

¹²

参考