Uncaught ReferenceError: callback_func is not defined　の発生原因について

前提・実現したいこと

検索ボックスにキーワードを入力して「検索」ボタンをクリックしたら、WikipediaAPIからJSONPで取得してきた検索結果を表示する
というプログラムを作っています。
コールバック関数を書く位置によって以下のエラーが出てしまうのですが、どのようなルールに反しているために出てしまうのか、理由が分かりません。
Uncaught ReferenceError: callback_func is not defined
どなたかご解説いただければありがたいです。

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

このように、addEventListenerの外側にコールバック関数を書くと正常に動作します

<body>
  <h1>Lesson 8-5-q</h1>
  <form id = "search">
    <input id = "keyword" name = "keyword" type = "text">
    <button type = "submit">検索</button>
  </form>
  <div id="output"> </div>
  <script>
    var callback_func = function(data){
        var json = data.query.search;
        var html = '';
        for(var i=0; i < json.length; i++){
          html += '<h2><a href="https://ja.wikipedia.org/wiki/' + json[i].title + '">' + json[i].title + '</a></h2>';
          html += '<div class="excerpt"><p>' + json[i].snippet + '</p></div>';
        }
        document.getElementById("output").innerHTML = html;
      };
      document.getElementById('search').addEventListener("submit",function(e){
      e.preventDefault();
      var keyword = document.getElementById('keyword');
      var script = document.createElement('script');
      script.src = 'https://ja.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=' + keyword.value + '&callback=callback_func';
      document.body.appendChild(script);
    });    
  </script>
</body>

該当のソースコード

しかし、addEventListenerの内側にコールバック関数を書くと上記エラーが発生します。

<body>
  <h1>Lesson 8-5-q</h1>
  <form id = "search">
    <input id = "keyword" name = "keyword" type = "text">
    <button type = "submit">検索</button>
  </form>
  <div id="output"> </div>
  <script>
      document.getElementById('search').addEventListener("submit",function(e){
      e.preventDefault();
      var keyword = document.getElementById('keyword');
      var script = document.createElement('script');
      script.src = 'https://ja.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=' + keyword.value + '&callback=callback_func';
      document.body.appendChild(script);
      var callback_func = function(data){
        var json = data.query.search;
        var html = '';
        for(var i=0; i < json.length; i++){
          html += '<h2><a href="https://ja.wikipedia.org/wiki/' + json[i].title + '">' + json[i].title + '</a></h2>';
          html += '<div class="excerpt"><p>' + json[i].snippet + '</p></div>';
        }
        document.getElementById("output").innerHTML = html;
      };
    });    
  </script>
</body>