ある範囲で括られているデータを外でも使いたい。

Question

該当のソースコード

<input type = "file" id = "file1">

document.getElementById("file1").addEventListener("change",function(evt){
  var data = [0,1,2];//イベントリスナ内で宣言された変数
  console.log(data.length);//ファイル選択後"3"を出力
});

console.log(data.length);//ここでもdataを使いたいのに使えない！

前提・実現したいこと

イベントリスナー内で使用していた変数(この場合はdata)をイベントリスナー外でも使用したい。
(実際は、選択したファイルからデータを抜き出しそれを配列に格納し呼び出す予定です。イベントリスナー内で宣言して、イベントリスナー外でも使用したいという流れは同じなため、内容を簡単にしてあります。)

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

data is not defined(Chromeのコンソールログで確認しました)

試したこと

});(イベントリスナの閉じ括弧)の直前でreturn data; を挿入。エラーそのままです。

補足情報

言語 JavaScriptのみ
ブラウザ Google Chrome

以上、不明な点等ありましたら補足いたしますのでよろしくお願いします。
(サンプルコードは、コメント文で少し細かな説明を書いていただけるとありがたいです。)

Answer 1

var listener = {
    data: [],
    habndleEvent: function (event) {
      this.data = [0,1,2];//イベントリスナ内で宣言された変数
      console.log(this.data.length);//ファイル選択後"3"を出力
    }
  };

document.getElementById("file1").addEventListener("change", listener, false);

console.log(listener.data.length);

Re: akamo さん

Answer 2

外で使いたいならvarをつけずにグローバル変数として処理して下さい
どうしてもグローバル処理がいやならターゲットになるタグに
何らかの形でデータ保持することになると思います

document.addEventListener("change",function(e){
  var t=e.target;
  if(t.id=="file1"){
    var data=[1,2,3];
    t.setAttribute("data-mydata",JSON.stringify(data));
  }
});

document.addEventListener("click",function(e){
  var t=e.target;
  if(t.type=="button" && t.value=="test"){
    var data=JSON.parse(document.querySelector('#file1').getAttribute("data-mydata"));
    console.log(data);
  }
});

<input type = "file" id = "file1">
<input type = "button" value="test">

※testボタンを押すとchangeイベントで得た配列を参照できる
もしchange前に参照するとnul