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

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

ただいまの
回答率

91.45%

  • JavaScript

    10908questions

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

addEventListenerの使い方

解決済

回答 2

投稿 2016/10/06 19:11 ・編集 2016/10/06 20:02

  • 評価
  • クリップ 0
  • VIEW 496

Hiroooo

score 48

現在リッチエディタを作成していて、addEventListenerをうまく使えなくて困っています。
具体的には以下のような状況です。

最初のHTMLはエディタ入力前なので、このような感じです。

<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'></div>

そしてこのエディタに入力されると、例えば以下のようになります。

<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'>
    <p>aaa</p>
    <p>bbb</p>
    <div>
        <img id='media' src='...'>
    </div>
    <p>ccc</p>
</div>

上記のようにHTMLが変化することを見据えて、次のようなJavascriptでイベントを発生させようとしているのですが、mediaというものがまだ存在しないために「Uncaught TypeError: Cannot read property 'addEventListener' of null」というエラーが表示されてしまいます。

このような時はどのようにすればうまく動作させることができるのでしょうか?

var media = document.getElementById('media')
    media.addEventListener('mouseover', onMouseOver)//Uncaught TypeError: Cannot read property 'addEventListener' of null とういエラーが発生

    function onMouseOver(e) {
        console.log('100')
    }

追加情報
ちなみに以下のようなコードでcontenteditableなタグ内に画像やSNSの埋め込みコードを入れています。

addInstagram(e) {//画面にADDボタンがあり、ADDボタンをクリックで発火
    var embedCode = this.instagram.value

    var instagram = document.createElement('div')
    instagram.setAttribute('id', 'media')
    instagram.setAttribute('class', 'media-frame')

    instagram.innerHTML = embedCode

    var target = document.getElementById('body-text')
    target.appendChild(instagram)

    var newLine = document.createElement('p')
    target.insertBefore(newLine, instagram.nextSibling)
    newLine.focus()

    this.instagram.value = ''
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

addEventListenerはdocumentに付加しておけば、その中のタグをつかむことができます

<html>
<head>
<script>
document.addEventListener('mouseover', function(e){onMouseOver(e)});
function onMouseOver(e) {
  console.log("this is "+e.target.nodeName+ " tag");
}
</script>
</head>
<body>
test
<div>test</div>
test
</body>
</html>

 中途半端な追記

半分ギブアップ気味ですが、ご希望もありましたので試したソースを書いておきます
とくに気に入らないのは(1)の部分chromeでは中身が空文字のpを追加できない感じです
半角スペースはもちろん、改行マークやタブでもだめです。
苦肉の策で全角スペースをいれましたが美しくないのでなんとも言えません。
また適当なダミーをいれておいて、プログラムで空に上書きしてもだめっぽいです
どなたか賢者の方が解決策をもっているかもしれないので広く意見を聞いてみてください

(2)のところはタグがほしいのでchildNodeではなくgetElementsByTagNameで
アクセスさせています。もっといい方法ありそうな気がします

一応、chromeとfirefoxでは動作確認しましたがIEは未調整です

<script>
document.addEventListener('click',function(e){
  if(e.target.id!=="add") return false;
  var input = document.getElementById('instagram');
  var embedCode = input.value;
  var instagram = document.createElement('div');
  instagram.setAttribute('id', 'media');
  instagram.setAttribute('class', 'media-frame');
  instagram.setAttribute('contenteditable', 'false');
  instagram.innerHTML = embedCode;
  var target = document.getElementById('body-text');
  target.appendChild(instagram);
  var newLine = document.createElement('p');
  newLine.appendChild(document.createTextNode(" "));//(1)ここがどうしようもない
  newLine.setAttribute('contenteditable', true);
  target.insertBefore(newLine, instagram.nextSibling);
  target.focus();
  var sel = window.getSelection();
  var range = document.createRange();
  var nodes=target.getElementsByTagName("*");//(2)手抜きですがなんとか動きます
  range.setStart(nodes[nodes.length -1], 0);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
  input.value = '';
});
</script>
<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'></div>
<div class='modal instagram-modal' show={ instagramModal }>
Embed Instagram
<label>
<input type='text' id='instagram' placeholder='Input Instagram embed code'>
<button id='add'>add</button>
</label>
</div>

投稿 2016/10/06 22:31

編集 2016/10/07 18:13

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/06 22:56

    ありがとうございます。
    こちらのやり方で、e.targetで要素を引っ張ってこれるところまでは調べて理解したのですが、その後id=mediaのdivタグをマウスオーバーした時にconsole.log('100')をするにはどうしたいいのかの部分でつまずいてしまっています。
    こちらどうしたらいいのでしょうか?

    キャンセル

  • 2016/10/06 23:02

    function onMouseOver(e) {
    if(e.target.id=="media"){
    console.log(100);
    }
    }
    とすればいけると思います

    キャンセル

  • 2016/10/06 23:07

    あ、すいません。それでいけました。。
    こちらでお聞きする前に全く同じコードは試していたのですが、なぜかdivのエリアがかなり小さくなってしまっていて、自分はマウスオーバーしているつもりでも表示されていないだけでした。失礼いたしました。

    キャンセル

  • 2016/10/06 23:12

    ありがとうございました!!
    お礼を言いそびれてしまい申し訳ありません。

    また、もし可能であればなのですが、次のことも教えていただけますでしょうか?
    追加情報の下のコードブロックにあるaddInstagram(e)の以下の3行で、インスタグラムの埋め込みを終えた後に<p></p>を作成し、キャレットをそこに移動するということをやりたいのですが、キャレットが新しい<p></p>に移動しないのです。
    どこか間違っている箇所わかったりしますでしょうか?

    var newLine = document.createElement('p')
    target.insertBefore(newLine, instagram.nextSibling)
    newLine.focus()

    キャンセル

  • 2016/10/06 23:41

    newLine.focus()したのであれば
    var sel = window.getSelection();
    var range = document.createRange();
    range.setStart(newLine.childNodes[0], 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    みたいな感じでしょうか?もう少し簡単な例があれば実装テストできそうですが

    キャンセル

  • 2016/10/07 00:28

    いただいたものを加えてみたら、
    Uncaught TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.
    というエラーが出てしまいました。

    最近プログラミグを勉強しだしてからよく見るjsFiddleというものを使って簡単に作ってみます。

    キャンセル

  • 2016/10/07 01:12

    時間がかかってしまいすいません。
    以下に簡単に実装できるものを作成しました。(初めて使ってみたので不安ですが、おそらくこちらからコード見れ、されに変更して実行できると思います)

    現状ではインスタグラムのenbed codeをinputに入れて、addボタンを押すと、インスタグラムの埋め込みがされて、その下に<p></p>がつくられる段階で止まってしまっています。
    これを埋め込み後、キャレットが<p></p>に移動するようにしたいです。
    (適当なインスタグラムのenbed codeを右上のCSSの欄にコメントアウトして入れておきました)


    https://jsfiddle.net/hiro14/mhak78e8/

    キャンセル

  • 2016/10/07 10:21

    ちょっと試してみましたが、focusがnewLineに移らないようですね
    target([id=body-text]のdiv)がcontenteditableだからか
    その中には直接focusできないのかもしれません。
    targetにfocusした上でrangeのstart位置を子要素を元に設定すれば
    newLineにfocusすることも可能ですが、試した感じブラウザごとの
    挙動が違いすぎてあまり実用的でないかもしれません。

    キャンセル

  • 2016/10/07 17:25

    いろいろと教えていただきありがとうございます。
    いただいた考え方を参考に自分で下記のjsFiddleをいろいろ変更してみたのですが、どうしてもnewLineにfocusが当たりません。
    実際現状はchromeだけでもうまく動けばいいかなと思っているのですが、どのようにフォーカスを当てたか教えていただけますでしょうか?


    https://jsfiddle.net/hiro14/mhak78e8/

    キャンセル

  • 2016/10/07 18:13

    一応つたないソースを書いておきました
    参考にはならないとは思いますが、うまく自己解決できるとよいですね

    キャンセル

  • 2016/10/07 19:45

    いろいろとお手数おかけしてしまい申し訳ありませんでした。
    ひとまず動くものが手元にあるだけでだいぶ嬉しいです。

    本当にいろいろとありがとうございました!

    キャンセル

+1

getElementById は対象の要素ノードが存在しなかった時に null を返します。
script要素より後ろの要素はDOMツリーに追加されない為、<img id='media'> より後にscript要素を書けば問題は解決すると思います。

Re: Hiro14 さん

投稿 2016/10/06 19:45

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/06 20:05

    ご回答ありがとうございます。
    こちらで質問をさせていただく前に自分でいろいろ調べ勉強したので、こちらの内容は理解していました。

    ただ、今回はユーザーが画像やSNSの埋め込みを使用して初めて<img id='media'>がHTMLに追加される状況で、script要素よりも前に記述するのは難しいと思ったのですが、可能なのでしょうか?
    参考までに、インスタグラムの埋め込み画像をcontenteditableなtag内に挿入するコードを質問の最後に追加させていただきました。

    キャンセル

  • 2016/10/06 20:11

    該当要素ノードが動的に追加されるのなら、
    - 動的に追加されたタイミングで addEventListener を仕掛ける
    - 上位ノードで addEventListener を仕掛けて event.target で掴む
    の2通りの解決方法があります。

    キャンセル

  • 2016/10/06 20:29

    ありがとうございます!!
    どちらも今パッとはやり方が浮かぶわけではないですが、調べてやってみます!
    ちなみに、どちらが一般的だったり、優れているとかあったりしますか?

    キャンセル

  • 2016/10/06 20:33

    また、ここで質問させていただくのも大変失礼かもしれないのですが、上記追記コードの

    var newLine = document.createElement('p')
    target.insertBefore(newLine, instagram.nextSibling)
    newLine.focus()

    の部分で、インスタグラムの埋め込み後に<p></p>を追加して、キャレットをそこに移動させたいと思っているのですが、<p></p>は思った場所に追加されるもののキャレット移動しません。
    もしこちらも原因がわかりましたら、教えていただけますと嬉しいです。。

    キャンセル

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

ただいまの回答率

91.45%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    10908questions

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