BLOG ENTRY

イベントハンドラを使わないでデザインとロジックを分割[DOM][JavaScript]

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

[code lang=”js”]
<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>
[/code]
[code lang=”js”]
<div id="showMsg">Click Me</div>
[/code]

以上。

関連記事

  • name:JSでイベントリスナーやらでバリデートの実装いろいろ[DOM][JavaScript] | Web&MUSICブログ QUALL
  • date:2008/10/24
  • […] イベントハンドラを使わないでデザインとロジックを分割 […]

  • type:ピンバック [ ]

  • name:AJAX(非同期通信)リクエストをPrototypeとjQueryで行う[AJAX][JS] | Web&MUSICブログ QUALL
  • date:2008/10/25
  • […] イベントハンドラを使わないでデザインとロジックを分割 […]

  • type:ピンバック [ ]

  • name:JSでイベントリスナーやらでバリデートの実装いろいろ[DOM][JavaScript] | Web&MUSICブログ QUALL
  • date:2009/09/01
  • […] イベントハンドラを使わないでデザインとロジックを分割 […]

  • type:ピンバック [ ]

  • name:formの複数選択のselectボックスの値をJSで取得する[JavaScript] | Web&MUSICブログ QUALL
  • date:2009/09/01
  • […] イベントハンドラを使わないでデザインとロジックを分割 […]

  • type:ピンバック [ ]

  • name:AJAX(非同期通信)リクエストをPrototypeとjQueryで行う[AJAX][JS] | Web&MUSICブログ QUALL
  • date:2009/09/01
  • […] イベントハンドラを使わないでデザインとロジックを分割 […]

  • type:ピンバック [ ]

    WRITE COMMENT


    (required)


    (required)


    (required)

    MENU

    veltica creative of twitter