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の挙動が異なるみたい
あとで

JavaScriptのイベント処理の書き方

１．HTMLタグ内の属性として記述する

　　
Click

この書き方だとメンテナンス性が落ちる、あと１つのイベントしか処理できない

２．elementオブジェクトのonXXXXに関数を定義する

    document.getElementById("btn").onmousedown = funciont(evt) {
      evt = evt || window.event;
      ・
      ・
      ・
    }

１と同様に１つのイベントしか処理できない

３・addEventListener(IEではattachEvent)を利用する

    document.getElementById("btn").addEventListener('click', goFunc, false);
    function goFunc(evt) {
      evt = evt || window.event;
      ・
      ・
      ・
    }

複数のイベントを処理できる

DIV要素の移動

2秒毎にDIV要素を下方向に10px移動させるJavaScirpt

   var timerID;
   $('runBtn').onmousedown = startDown;
   $('stopBtn').onmousedown = stopDown;
   
   //２秒ごとにgoDown()を実行
   function startDown(){
    timerID = setInterval("goDown()", 2000);
   }

   //Interverl処理をキャンセル
   function stopDown() {
    if (timerID) clearInterval(timerID);
   }
   
   function goDown() {
    //offsetTopは親の座標軸を基準とした座標を返す
    //offsetTopはreadOnlyのため
    //div要素の座標変更にはstyle.topに代入する

    //staticではstyle.topは無効のため、absoluteにする
    $('boxA').style.position = "absolute";
    $('boxA').style.top = $('boxA').offsetTop + 10 + 'px';
   }
   

ブラウザのJavaScriptコールスタックサイズ

『JavaScriptコールスタックサイズ、ブラウザ比較』

Safari3はスタックサイズがなんでこんなに少ないんだろう？

JavaScriptエンジンがNitroになったSafari4ではどうなのか

IE7 (1,789)

Firefox3 (3,000)

Chrome1 (21,837)

Opera 9.62 (10,000)

Safari 3.2 (500)

CSS Naked Day (4月9日)

5日前のことだけど

こんなイベントをやってるサイトがあった

CSS Naked Day

イベントはCSSを無効にして、XHTML/HTMLの適切なマークアップがされているか

を知ろう！という意味でやっているらしい

ECMAScript Language Specification 5th edition (JavaScript2.0)

ECMAScript Language Specification 5th editionが公開された

ECMA

http://www.ecma-international.org/

MYCOM: ECMAScript 10年ぶり改訂、JavaScript 2

http://journal.mycom.co.jp/news/2009/04/14/017/index.html

Google Chrome 2.0.159

Google Chrome2.0.159で、日経のサイトが見れない。

一瞬表示されてるのだけど...CSSの処理が変わったのかな？

それともFlashと関係しているのかなー

他にもFlashを多用しているサイトでみれないところがあるので