JavaScript本格入門を読む・8

これ、昨日やったのに公開を忘れたので、公開するぜーーー
ぴょんぴょんするぜーーー

イベントリスナを登録する

function addListener(elem, ev, listener){
    if(elem.addEventListener){
        elem.addEventListener(ev, listener, false);
    } else if(elem.attachEvent){
        elem.attachEvent('on' +ev, listener);
    } else {
        throw new Error(' イベントリスナに未対応です')
    }
}
addListener(window, 'load', init);
function init() {
    addListener(document.getElementById('btn'), 'click', function(){
        window.alert('ボタンがクリックされました。');
    });
}
（中略）
<input type="button" id="btn" value="ダイアログ表示" />

IEのためにわざわざ別コード書くのめんどうくさいなぁ。
CSSとかもそうだけど、JSもなのね。滅べばいいのにね。

イベントリスナを削除する

function removeListener(elem, ev, listener){
        if(elem.removeEventListener){
            elem.removeEventListener(ev, listener, false);
        } else if(elem.detachEvent){
            elem.detachEvent('on' +ev, listener);
        } else {
            throw new Error(' イベントリスナに未対応です')
        }
}

次のに必要だったのでこっちも

イベントに関わる情報を取得する

addListener(window, 'load', init);
function init(){
    addListener(document.getElementById('logo'),'mousedown',
            function (e) {
                var result = [];
                result.push('発生元：' +getSource(e).id);
                result.push('イベント：' + e.type);
                result.push('ボタン：' +getButtonType(e));
                result.push('X座標：' + e.clientX);
                result.push('Y座標：' + e.clientY);
                window.alert(result.join('\n'));
            });
}
function getSource(e){
    if(e.target){
        return e.target;
    } else if(window.event){
        return window.event.srcElement;
    }
}

function getButtonType(e){
    if(e.target){
        switch(e.button){
            case 0 :return 'left';
            case 1 :return 'center';
            case 2 :return 'right';
        }
    } else if(window.event){
        switch(window.event.button){
            case 1 :return 'left';
            case 2 :return 'right';
            case 4 :return 'center';
        }
    }
}
（中略）
<img id="logo" src="http://www.wings.msn.to/image/wings.jpg" />

switch文キター
IE用のやつうざいなぁ

上位要素へのイベント伝播を抑制する

addListener(window, 'load', init);
function init(){
    addListener(document.getElementById('outer'), 'click', function(e){
        window.alert("上位要素のイベントリスナです");
    });
    addListener(document.getElementById('inner'), 'click', function(e){
        window.alert("下位要素のイベントリスナです");
    });
}
（中略）
<div id="outer">
    <div id="inner">
        クリックしてみましょう。
    </div>
</div>

cancelBubbleは別にいいかな・・・
メモ：IEはcancelBubbleプロパティ、それ以外のブラウザはstopPropagationメソッドを使用

イベントデフォルトの挙動を抑止する

function cancelEvent(e){
    if(e.preventDefault){
        e.preventDefault();
    } else if (window.event){
        window.event.returnValue = false;
    }
}
addListener(window, 'load', init);
function init(){
    addListener(document.getElementById('fm'), 'submit', function(e){
        if(!window.confirm('送信してよろしいですか？')){
            cancelEvent(e);
        }
    });
}
（中略）
<form id="fm">
    <input type="text" id="name" size="10" />
    <input type="submit" value=" 送信" />
</form>

また、綴りを間違えたけど、アラートが出るからわかりやすいな・・・
JSは躓くとそれ以降処理されないからどのへんが間違っているかアタリがついて良いなぁ。
今日はAjaxどこまで出来るかしらん。