addEventListener

event.addEventListener
addEventListenerは
　第一引数＝イベントタイプを表す文字列（ex."click")
第二引数＝EventListener インターフェースで実装されたオブジェクトあるいはJavaScriptの関数名
　第三引数＝falseの場合は子から親へ順番にイベントが伝播されるが、trueの場合は優先される。

第二引数の関数に引数を渡す場合、下の書き方ではダメ

document.getElementById('btn').addEventListener("click", doAlert('msg1'), false);
function doAlert(msg) {
  alert(msg)
};

渡す方法としては
無名関数として書く

    document.getElementById('btn').addEventListener("click", function(e) {doAlert('msg1')}, false);
    document.getElementById('btn').addEventListener("click", function(e) {doAlert('msg2')}, false);
   function doAlert(msg) {
    alert(msg)
   };

だが、無名関数で書くと、removeEventListenerでイベントの削除ができない
下記のように、それぞれ名前付き関数で関数参照を保持すればよいのかな？

    var listener1 = function (event) { doAlert('msg1'); };
    var listener2 = function (event) { doAlert('msg2'); };
    document.getElementById('btn').addEventListener("click",listener1,false);
    document.getElementById('btn').addEventListener("click",listener2,false);

また、リスナーに登録できるのは
"EventListener インターフェースで実装されたオブジェクト"
ともあるので、以下のような書き方もできる(Firefox、OperaなどでIEではダメ）

    var listener1 = {
     handleEvent : function (event) {
      doAlert('msg1');
     }
    }
    document.getElementById('btn').addEventListener("click",listener1,false);

上のやり方で、それぞれthisの挙動が異なるみたい
あとで