Web＆MUSICブログ　QUALL

イベントハンドラを使わないで、JavaScriptとHTMLのデザインとロジックを切り分ける基本的なコードメモ
（イベントリスナーはIE用とDOM標準準拠ブラウザ用とで分岐する）

<script type="text/javascript">
//<![CDATA[
/* イベントリスナのブラウザ分岐 */
var addEvent = function(node, evt, func) {

    if (node.addEventListener) {
        node.addEventListener(evt, func, false);

    } else if (node.attachEvent) {
        node.attachEvent('on' + evt, func);
    }
};

/* ロード時用の実行処理 */
var init = function() {
    var node =  document.getElementById('showMsg');
    var showMsg = function() {
        alert('クリックありがとうございます');
    };
    addEvent(node, 'click', showMsg);
};
/* HTMLをブラウザが読み込むと同時に走る */
addEvent(window, "load", init);
//]]>
</script>

<div id="showMsg">Click Me</div>

以上。

関連記事

• JSでイベントリスナーやらでバリデートの実装いろいろ
• formの複数選択のselectボックスの値をJSで取得する
• イベントハンドラを使わないでデザインとロジックを分割
• javascriptで独自オブジェクトを作成する

関連記事

1. apache2.2.15をCentOSにソースからインストール[Linux]
2. mysql5.1.45をCentOSにソースからインストール[Linux]
3. AS3でXMLファイルの内容を読み込んで出力する[AS3]
4. AS3で外部JSONデータ読み込みのカスタムイベント[AS3][JSON]
5. [MySQL]ファイルを使ってデータをバックアップ&リストア