【JavaScript】イベントハンドラを設定した時、引数のEventオブジェクトが "undefined" となってしまう原因がわからない

実現したいこと

こんにちは。JavaScriptの勉強を独学でしている者です。
イベントハンドラの引数 e を使って、htmlのpタグ内のテキストを書き換えられるようにしたいです。

前提

pタグにカーソルを乗せると、pタグに挟まれたテキストが書き換えられるようにするため、
pタグにonmouseover属性を追加し、イベントハンドラを登録しました。
ところが、MicrosoftEdgeで画面表示してみると、下記のエラーが表示されてしまい、イベントハンドラを実行してくれません。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading 'target')

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5    </head>
6    <style>
7        p {
8            background-color: aquamarine;
9        }
10    </style>
11    <body>
12        <h3>今日の朝ご飯</h3>
13            <p onmouseover="morning()">白ご飯，目玉焼き</p>
14    </body>
15    <script> 
16        const morning = function(e) {
17            e.target.textContent = "食パン，ヨーグルト";
18            console.log(e);
19        };
20    </script>
21</html>

試したこと

16行目をコメントアウトして、17行目でEventオブジェクト e をコンソール表示させると、"undefined"と表示されてしまいました。
onmouseover属性をonclick属性に変えても、同様のエラーメッセージが出てしまいます。
JavaScriptのコードの実行タイミングが問題かと思い、scriptタグをbodyタグの前に置いてみましたが、Eventオブジェクトをコンソール表示結果はundefinedでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答4件

onmouseover="morning(event)"でいいと思います。

参考：

これは、一般的に、属性内で変数 event を使用することができることを意味しています。
イベントハンドラー属性 | HTML 属性リファレンス - HTML: ハイパーテキストマークアップ言語 | MDN

投稿2023/10/16 05:49

編集2023/10/16 05:57

Lhankor_Mhy

総合スコア36898

JavaScript_mg

2023/10/16 10:41

ご回答ありがとうございます。お示しの方法で無事作動しました。参考サイトもありがとうございます。イベントハンドラを属性で指定する方法はそもそも推奨されていないのですね。全く知りませんでした...。

行動規範の内容に同意します

ベストアンサー

<p onmouseover="morning()">

引数を指定してないので、undefined になります。

onmouseover などの属性でやるなら、onmouseover="morning(event)" と書く必要があります。
onmouseover 属性を使うのをやめて、document.querySelector('p').addEventListener('mouseover', morning); のように addEventListener() を使うのがオススメです。

投稿2023/10/16 05:51

int32_t

総合スコア21601

JavaScript_mg

2023/10/16 10:40

ご回答ありがとうございます。引数にeventを指定して実行したところ、うまく作動しました。 addEventListener()を使うほうがおすすめなのですね。参考になります。ありがとうございました。

行動規範の内容に同意します

htmlに埋め込むときはこうします

HTML
1<p onmouseover="morning(this)">白ご飯，目玉焼き</p>
2<script>
3const morning = function(target) {
4   target.textContent = "食パン，ヨーグルト";
5};
6</script>

もしくは引数をつかわない

javascript
1<p onmouseover="morning()">白ご飯，目玉焼き</p>
2<script>
3const morning = function(target) {
4   event.target.textContent = "食パン，ヨーグルト";
5 };
6</script>