JavaScript

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

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

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

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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