JavaScript

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

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

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

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

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アクセスランキング にほんブログ村