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

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

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

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

Q&A

解決済

3回答

5228閲覧

javascriptイベントのホバー処理が効かない

roronoazoro

総合スコア113

JavaScript

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

0グッド

1クリップ

投稿2017/12/28 08:33

初歩的なミスだと思うのですが、コンソールエラーなど表示されておらず原因がわからないので質問させてください。
とある教材のマウスオーバー、マウスアウトをjavascript下で行うといったシンプルなものです。
ディレクトリは一時的に試すだけだったのでダウンロードディレクトリで行なっております。

状況としてはホバー処理のみ効かない状態です。

下記ダウンロード配下使用ファイル

  • a.html
  • a.js
  • a.JPG
  • b.jpg

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8</head> 9<body> 10 <img src="a.JPG" alt="" width="300px" id="catImg"> 11</body> 12</html> 13

css

1 2window.addEventListener("DOMContentLoaded", function(){ 3 var image = document.getElementById("catImg"); 4 // マウスオーバー時 5 image.addEventListener("mouseover", function(event){ 6 this.src = "b.jpg"; 7 }); 8 9 // マウスアウト 10 image.addEventListener("mouseout", function (event) { 11 this.src = "a.JPG"; 12 }); 13}); 14

猫

何かアドバイスいただけますと幸いです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

ベストアンサー

スクリプトの読み込みがHTML上に書かれていないのでは。
質問文のスクリプトが「CSS」になっているのも気になります。

投稿2017/12/28 08:53

kei344

総合スコア69366

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

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

roronoazoro

2017/12/28 09:27

ご回答ありがとうございます。 まさにその通り、jsファイルの読み込みが抜けておりました。。。 ありがとうございます。
guest

0

普通に動くと思います
a.JPGは拡張子が大文字ですが大丈夫ですか?

投稿2017/12/28 08:44

yambejp

総合スコア114585

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

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

defghi1977

2017/12/28 09:47

DOMContentLoadedイベントの挙動を再認識することが出来ました. ずっとバブリングしないものと考えていました.
guest

0

以下はdocumentオブジェクトが発したDOMContentLoadedイベントがwindowオブジェクトにバブリングしない前提で回答していましたが, 実際はwindowオブジェクトでDOMContentLoadedイベントをキャッチできるようです.

従ってコードそのものに問題はないものの, 本質的に「JavaScriptファイルを読み込んでいないことにより, 実際にはスクリプトが実行されていなかった」ことが問題だったことになります.

参考)
https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded


※以下間違った記述

windowオブジェクトはloadイベントを,documentオブジェクトはDOMContentLoadedイベントを発します.

従って, windowオブジェクトのDOMContentLoadedイベントをリッスンしている現状のコードではリスナ関数が 呼び出されることはありません .
DOMContentLoadedイベントは上位のwindowオブジェクトでキャッチできるのでリスナ関数は呼び出されます.

つまり

JavaScript

1document.addEventListener("DOMContentLoaded", function(){ 2//もしくは 3//window.addEventListener("load", function(){ 4 var image = document.getElementById("catImg"); 5 // マウスオーバー時 6 image.addEventListener("mouseover", function(event){ 7 this.src = "b.jpg"; 8 }); 9 10 // マウスアウト 11 image.addEventListener("mouseout", function (event) { 12 this.src = "a.JPG"; 13 }); 14});

とします.

投稿2017/12/28 08:41

編集2017/12/28 09:46
defghi1977

総合スコア4756

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

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

roronoazoro

2017/12/28 09:29

jsファイルをbody内でリンクしたところ読み込まれました。。 違ったやり方も教えていただきありがとうございます。
defghi1977

2017/12/28 09:38

すみません, DOMContentLoadedイベントはバブリングしないと思いこんでいました. 回答を取り消します.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問