質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

210閲覧

アドイベントリスナーのコードの位置が分かりません。

neginattofan

総合スコア66

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/06/08 05:23

下にある、18行目から26行目のアドイベントリスナ―について質問です。

panel.addEventListener('click', function() { if ((this.textContent * 1) === currentNum) { this.className = 'panel flipped'; currentNum++; } if (currentNum === SIZE * SIZE) { clearTimeout(timerId); } });

こちらがjavascriptのコードの全文です。

(function() { 'use strict'; var SIZE = 3; var currentNum = 0; var PANEL_WIDTH = 50; var BOARD_PADDING = 10; var startTime; var timerId; function createPanel(num) { var panel; panel = document.createElement('div'); panel.className = 'panel hidden'; panel.textContent = num; panel.addEventListener('click', function() { if ((this.textContent * 1) === currentNum) { this.className = 'panel flipped'; currentNum++; } if (currentNum === SIZE * SIZE) { clearTimeout(timerId); } }); return panel; } function initBoard() { var board = document.getElementById('board'); var i; var panels = []; var panel; document.getElementById('container').style.width = PANEL_WIDTH * SIZE + BOARD_PADDING * 2 + 'px'; while (board.firstChild) { board.removeChild(board.firstChild); } for (i = 0; i < SIZE * SIZE; i++) { panels.push(createPanel(i)); } while(panels.length) { panel = panels.splice(Math.floor(Math.random() * panels.length), 1); board.appendChild(panel[0]); } } function runTimer() { document.getElementById('score').textContent = ((Date.now() - startTime) / 1000).toFixed(2); timerId = setTimeout(runTimer, 10); } initBoard(); document.getElementById('btn').addEventListener('click', function() { var panels = document.getElementsByClassName('panel'); var i; if (typeof timerId !== 'undefined') { clearTimeout(timerId); } currentNum = 0; initBoard(); for (i = 0; i < panels.length; i++) { panels[i].className = 'panel'; } this.textContent = 'RESTART?'; this.className = 'restart'; startTime = Date.now(); runTimer(); }); })();

なぜ、このaddEventListenerはcreatePanel()の中にある必要があるのでしょうか?
(var panel; をローカル関数ではなく、グローバル関数にしたり、他にも試してみましたが、うまくいきませんでした。)

例えば、関数の中の変数はreturnを使うと取り出せると思うのですが、addEventListenerはcreatePanel()の中にあっても、参照(?)できるということでしょうか?

質問が分かりにくいかもしれませんが、回答よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Event​Target​.add​Event​Listener()EventTarget の addEventListener() メソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定するものです。

関数を定義するものではなく、「イベント対象に対してイベントを設定する」ものです。
なので、イベント対象が生成(今回はcreateElement()により生成されたdiv)されたタイミングでイベントを付与する必要があるわけです。

イベントは付与されたら即動作するわけではなく、規定の操作が発生するまで待ち状態となっています。
つまり、既定の操作が確実にされないタイミングで、イベント対象の要素が生成された後であればどこに書いても良いといえば良いですが、生成されたタイミングで付与するのが分かりやすく、コードも読みやすくなります。

投稿2019/06/08 05:51

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

neginattofan

2019/06/08 06:25

分かりやすい説明ありがとうございます!
m.ts10806

2019/06/08 06:36

既に試されているように記述位置をいろいろ変えてみたりするのは理解を深めるのに有用と思いますので是非続けてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問