2011年04月22日

イベントリスナーaddEventListener,attachEventメソッド

スポンサード リンク

 イベントハンドラの登録メソッド
addEventListener , attachEvent

 ブログで1ページに、記事が2ツあり、両方の記事に
window.onloadイベントが設定されている場合、onloadに記述された命令が上書きされるので、
最後のonloadに設定された関数 '記事2' しか実行されません。
つまり下記の方法では同一オブジェクトに同一イベントを付加できないと言う事です。
window.onload = function(){
      alert('記事1'); }//表示されない。
  window.onload = function(){
      alert('記事2'); }
これを回避するために,addEventListener (IE はattachEvent)を使ってみました。

サンプルソース

<html>
 <head>
  <title>イベントリスナー addEventListener,attachEventメソッド</title>
<script language="JavaScript">
 <!--javascript123
function Fnc1(){
 document.getElementById("btn").onclick = function (){
  alert('記事1 ページ読み込み時に実行したい処理');
        }
     }

function Fnc2(){
 document.getElementById("btn1").onclick = function (){
  alert('記事2 ページ読み込み時に実行したい処理');
       }
    }

try{
  window.addEventListener("load",Fnc1,false);// IE以外
     }catch(e){
  window.attachEvent("onload",Fnc1);// IE
        }

try{
  window.addEventListener("load",Fnc2,false);
    }catch(e){
window.attachEvent("onload",Fnc2);
      }
// -->
</script>
</head>
   <body>
<form>
  <input type = "button" value = "記事1" id = "btn">
  <input type = "button" value = "記事2 " id = "btn1">
  <input type="button" id="myButton" value="Click">
</form>

   </body>
 </html>

イベントリスナーの登録 オブジェクトにイベントを付加する方法
   elm.addEventListener(type, fnc, Capture);// IE 以外
  elm.attachEvent(type,fnc); // IE

elm : イベントを付加する要素。
type : 発生させるイベントのタイプ。
       * addEventListener はイベントハンドラから"on"を取った値 load,clickなど。
       * attachEvent は イベントハンドラ onload,onclickなど。
fnc :  イベントが発生したとき実行する関数
Capture : イベントのキャプチャの有無(true/false)IEにはありません。普通はfalseでOK 。
              element.addEventListener - MDC Doc Center
ブラウザの判別
 IEではaddEventListenerは使えないのでエラーになります。これを利用します。
  try{elm.addEventListener(type, fnc, Capture);
    }catch(e){elm.attachEvent(type,fnc);}


try{ }エラーが発生するおそれのあるソースを記述し、
catch{ }内にエラーが発生したらおこなう処理を書きます。
Javascript try 〜 catch 例外処理、エラー処理
addEventListenerとattachEventの共通関数化
function addEVT(elm,type,fnc){ // typeに"on"は付けない。
 try{ elm.addEventListener(type,fnc,false);
       }catch(e){ elm.attachEvent("on"+type,fnc);
     }
   }

 addEVT(elm,type,fnc)がIEとそれ以外のブラウザで共通に使える関数になります。
関数  addEVT( )の使用例 ←←クリックすると開閉します。
イベント、イベントハンドラ
イベントとは、ボタンをクリックした、キーボードを押した、ページを読み込んだ、など
ブラウザ上でさまざまな行動を行った際に発生します。
このイベントを受け取るのがイベントリスナーです。
イベントハンドラは、発生したイベント対して特定の処理を行うための記述です。
onload onFocus / onBlur  onChange onSelect onMouseOver / onMouseOut
onMouseDown / onMouseUp / onMouseMove onKeyup
posted by javaScript at 18:10 | 大阪 ☔ | イベント、イベントハンドラ | このブログの読者になる | 更新情報をチェックする

2010年04月12日

onloadイベントで"読み込み中"を表示

スポンサード リンク

ページを開いた時
JavaScriptを使って"読み込み中"を表示します。

 Now Loading.....
mosimo market
フットマッサージャー Twin Wave(ツインウェーブ) AIM-005 ローズピュアホワイトスキンエッセンス+4種原液 【6個セット】 20インチ折畳自転車 グローイングフラット ツヤ消しカラー/ワインレッド + 自転車アクセサリー4種セット
「かんてきやさえSAE」のバーベキューセット 計6.0kg ナイロンキャンパス防水2WAYウエストバッグ BS091YN タン サントリー 鉄骨飲料(特定保健用食品) 【60本】

 onunloadイベントが発生します。

サンプルソース

<html>
 <head>
  <title>背景画像にツールチップを表示</title>
<style type="text/css">
 <!--/*javascript123*/

    #loading{
    font-size : 1.2em; /* 文字の大きさ */
    font-weight : bold; /* 文字の太さ */
    color : red; /* 文字の色 */
  visibility:visible; / *表示* /
     }
-->
</style>
<script language="JavaScript">
<!--
  window.onload=pgLoad;
   function pgLoad(){ //要素'loading'を非表示
    document.getElementById('loading').style.visibility="hidden";
     }
// -->
</script>
</head>
<body>
  <span id="loading">
   <!--読み込み中のアイコンと文字列-->
<img src="/image/loadingarw.gif">  Now Loading.....</span>
<p>ここにサイズの大きな画像を配置</p>
 </body>
</html>

onload イベント
  onLoadイベントはページや画像が画面上にロードしたときに発生します。
onunload イベント
  ページを閉じた時やリロード(再読み込み)した時に、発生します。
読み込み中、Now Loadingの
アニメーションGIF画像(スピナーなど)を 簡単に作成できるサイトです。
  http://www.ajaxload.info/
  *Now Loading.....が表示されない、またはすぐに消えてしまう場合は
上記サンプルのようにファイルサイズの大きな画像を数枚、
配置すると表示時間が長くなります。

onFocus / onBlur イベントハンドラ
onChange イベントハンドラ
onSelect イベントハンドラ
onMouseOver / onMouseOut イベントハンドラ
onMouseDown / onMouseUp / onMouseMoveイベントハンドラ
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 21:27 | 大阪 ☔ | イベント、イベントハンドラ | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。