jQueryのイベントリスナーの書き方を現役エンジニアが解説【初心者向け】

初心者向けにjQueryのイベントリスナーの書き方について現役エンジニアが解説しています。イベントリスナーとは、あるイベントの発生に応じて呼び出される一連の処理のことを指します。jQueryでは、セレクター式にイベント名を書いて、その中に処理を行う関数を書きます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

jQueryのイベントリスナーの書き方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

jQueryのイベントリスナーの書き方について詳しく説明していくね!

大石ゆかり

お願いします!

 

イベントリスナーとは

イベントリスナーとは、あるイベント(画面のロード、ボタンクリックなど)の発生に応じて呼び出される一連の処理のことを指します。イベントセレクターの構文としては以下のような形になります。

$(セレクター式).イベント名(function(e) {
……イベントの発生に応じて呼び出される処理……
});

 

イベントオブジェクトとは

イベントオブジェクトとは、イベントリスナーで呼び出された際に、その呼出したイベントが持っている様々な情報(マウスの座標情報や押されたボタンの種類など)が格納されているオブジェクトです。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

function(e)のeの意味

構文に出ていたeの部分の意味ですが、このeの中に先程のイベントオブジェクトが格納されています。イベントリスナ内で使用しなければ省略が可能です。

実際に書いてみよう

イベントオブジェクトを使用するために、今回はdiv要素内でマウスをクリックしたときに、それぞれの領域(デスクトップ・ページ・ブラウザ表示領域・要素)を基準としたときのマウス位置を表示する例を書きます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="box" style="position:absolute; margin:30px; top:20px; left:20px; width:300px; height:200px; border:solid 1px #000"></div>
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script>
$('#box').on("click", function(e) {
console.log('screen=' + e.screenX + ',' + e.screenY);
console.log('page=' + e.pageX + ',' + e.pageY);
console.log('client=' + e.clientX + ',' + e.clientY);
console.log('offset=' + e.offsetX + ',' + e.offsetY);
});
</script>
</body>
</html>

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。