CreateJS実践講座

イベントリスナーの確認と削除

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントリスナーの確認と削除のメソッドを使って、ドラッグ&ドロップの後処理を行います。
講師:
06:54

字幕

(講師)マウスのドラッグ&ドロップの 作例を元にしてー イベントリスナーの確認と削除の 仕方について ご説明します マウスのドラッグ操作というのはー 基本的に2つの処理があれば 一応はできます まず1つ目は マウスのボタンを インスタンスの上で押した時です そうしたら 動かす訳ですからー 動かすためのリスナー関数を マウスを動かすイベントに対して登録します そうすると そのマウスを動かす リスナー関数というのはー マウス座標を調べて その位置にインスタンスを合わせる これでドラッグ&ドロップができる訳です でも もう1つ 知っておいた方が 良いことがあります それはマウスボタンを放した時にー いらないイベントリスナーは 削除するということです それに関わって 2つメソッドをご紹介します イベントリスナーの確認と削除です イベントリスナーの確認はー オブジェクトに対して hasEventListener イベントリスナーはありますか? という質問のメソッドです 括弧の中にはどのイベントの リスナーを調べたいかというー そのイベントを引数として渡します 次にイベントリスナーを削除したいとき これはオブジェクトに対して removeEventListener イベントリスナーを削除してください というお願いです 引数 括弧の中の引数は addEventListenerと同じでー どのイベントに対して登録してある どういうリスナー関数ー これを削除してください という風にお願いします この DreamWeaver で開いている HTMLドキュメントはー マウスとドラッグの2つの処理しか まだ書いていません まず マウスボタンを押した時 ドラッグを始める訳ですからー その準備のためのリスナー関数を 実行します すると 先ほど申し上げた通り インスタンスに対してー 押したまま動かしたら このリスナー関数を動かすんだよと そのリスナー関数というのは インスタンスを動かす訳ですからー マウスポインタの座標 XY 座標を調べたら その座標をー インスタンスに対して XY 合わせる ということで これで一応ー マウスポインタに合わせて ドラッグ&ドロップができます 確認しましょう ファイル>ブラウザでプレビュー です マウスボタンを押しました そして 動かすと 押したまま動かすと ちゃんと付いてきます 放せば止まる また押したまま動かすと ちゃんと ドラッグ&ドロップができます けれども これはきちんとイベントリスナーの 削除をしておいた方がいいでしょう では まず イベントリスナーを 削除していないとどうなるのかということをー 先ほどの hasEventListener メソッドで 確認することにしましょう この statDrag のリスナー関数の中です だいたい同じなので ここを コピーしてしまいましょう コピーしてー ペーストします 確認は hasEventListener でしたね has にして 括弧を閉じます これを console.log で 確認することにしましょう console.log で ブラウザの中でー この結果を確認します リスナー関数が登録されていれば true ー されていなければ false が コンソールの方に出てきます では 保存をしてー 確認したいと思います プレビューです さて まず コンソールを表示しましょう Chrome ですので 開発/管理>デベロッパーツール ー ということで開きます 下に確認の窓が出てきますので マウスボタンを押します そうすると 先ほどの console.log の中にー hasEventListener を登録しましたね ですから その結果が出てきます 押します false つまり まだイベントリスナーは ありません ということです ドラッグします 放します さて ここです 放した時に イベントリスナーを削除する という処理がまだ加わっていません では もう一度押します マウスボタンを押すと 今度は true が出てきましたね つまり イベントリスナーがすでにありますよ ということです また 押します これ 何度押しても true ですね 数が上がっているのは 押すたびにー true が出力されている ということなのですがー つまり イベントリスナーが 削除されていません まぁ 動きとして 特に問題なさそうに 見えるんですけれどもー いらないものが入っているというのは できれば避けたいです ですから removeEventListener の メソッドを呼び出すことにしましょう removeEventListener は マウスボタンを放した時に行います そのイベントリスナーは やはりこの statDrag の中でー 登録することにします では これ やはり コピーしてしまいましょう コピーをしてー removeEventListener をするための リスナー関数を新たに登録します イベントはというと 押したまま 放したらー pressup です そして イベントリスナーの関数は 新たに作りましょう では stopDrag とします 基本的には 同じような形をしているので コピーして 使ってしまいます コピーして ここに持ってきます そして stopDrag ですね 綴りがかなり似ています console.log はいりませんので 消してー add を remove に変えます add をもう1つ remove に そして 保存をしてー ブラウザでプレビューしましょう コンソールを出しますのでー 表示>開発/管理>デベロッパーツール です さて マウスボタンを押します 最初は false でしたね 放します もう一度押します false が2になりました ですから 相変わらず false です また押します 何度押しても これ false ですのでー マウスボタンを押した時にはー リスナー関数は削除されている ということが確認できました このレッスンではー イベントリスナーの確認と削除について ご紹介しました 確認をしたいという場合にはー hasEventListener で どのイベントのリスナーがあるかどうかー 確認したいのかというイベントを 引数に渡します 今回は console.log で確かめました イベントリスナーがあれば true なければ false が返されます イベントリスナーを削除したいときはー 今回はマウスボタンを放した時に 削除したいのでー そのリスナー関数を登録してー その中でインスタンスに対して removeEventListener そして 削除したいイベントと そのリスナー関数を登録するー ということでした

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

3時間26分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。