JavaScript

【JavaScript】mousedownイベントとは?マウスのボタンが押された時に処理を実行させる

こちらの記事では、JavaScriptのmousedown(マウスダウン)イベントについてサンプルコードを用いて分かりやすく解説しています。

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

mousedownイベントとは

mousedownイベントとは、ユーザーがイベントを設定した要素を押した瞬間に発火するイベントです。

クリックイベントと発火するタイミングと発火条件が非常に似ているため、困惑してしまう人も多いですがクリックイベントは、完全なクリック操作後(同じ要素内でマウスのボタンが押され離れたタイミング)に実行されるのに対して、mousedownイベントはマウスのボタンが押された瞬間に実行されるイベントになります。

mousedownイベントの使い方

mousedownイベントは「addEventListenerメソッドにmousedownを指定する」「onmousedownプロパティ」「onmousedown属性」の3つの書き方があります。
▼トリガーになる要素を取得(addEventListenerとonmousedownプロパティで使用)
const elem = document.getElementById('js-btn'); // トリガーになる要素を取得

▼addEventListenerメソッド
elem.addEventListener('mousedown',function(){ // 第一引数にmousedownを指定
  // 処理を記述
});

▼onmousedownプロパティ
elem.onmousedown = function(){
  // 処理を記述
};
▼onmousedown属性
<button onmousedown="mousedownEvent()">テキスト</button>

<script>
function mousedownEvent(){
  // 処理を記述
};
</script>

サンプルコード

下記のサンプルコードは、onmousedown属性を使って作成したものになります。
<button id="js-btn" onmousedown="mousedownEvent()">テキスト</button> // ①

<script>
const btn = document.getElementById('js-btn');

function mousedownEvent(){ // ②
  btn.insertAdjacentHTML('afterend', '<p>mousedownイベントが実行されました!</p>'); // ③
};
</script>
サンプルコードの表示確認

サンプルコード解説

  1. トリガーとなる要素のHTMLタグに対して、onmousedown属性を付与しJavaScript側で呼び出す関数を指定する
  2. onmousedown属性で指定した関数を定義する
  3. insertAdjacentHTMLメソッドを使い、mousedownイベントが発火されたタイミングで「mousedownイベントが実行されました!」のテキストを表示させる

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村