イベントハンドラの登録メソッド
addEventListener , attachEvent
ブログで１ページに、記事が２ツあり、両方の記事に
window.onloadイベントが設定されている場合、onloadに記述された命令が上書きされるので、
最後のonloadに設定された関数 '記事2' しか実行されません。
つまり下記の方法では同一オブジェクトに同一イベントを付加できないと言う事です。
window.onload = function(){
alert('記事１'); }//表示されない。
window.onload = function(){
alert('記事２'); }
これを回避するために,addEventListener (IE はattachEvent）を使ってみました。サンプルソース
<html>
<head>
<title>イベントリスナー addEventListener,attachEventメソッド</title>
<script language="JavaScript">
<!--javascript123
function Fnc1(){
document.getElementById("btn").onclick = function (){
alert('記事１ ページ読み込み時に実行したい処理');
}
}
function Fnc2(){
document.getElementById("btn1").onclick = function (){
alert('記事２ ページ読み込み時に実行したい処理');
}
}
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 = "記事１" id
= "btn">
<input type = "button" value = "記事２ "
id = "btn1">
<input type="button" id="myButton" value="Click">
</form>
</body>
</html>
イベントリスナーの登録 オブジェクトにイベントを付加する方法
elm.addEventListener(type, fnc, Capture);// IE 以外
elm.attachEvent(type,fnc); // IEelm : イベントを付加する要素。type : 発生させるイベントのタイプ。* addEventListener はイベントハンドラから"on"を取った値 load,clickなど。
* attachEvent は イベントハンドラ onload,onclickなど。
fnc : イベントが発生したとき実行する関数Capture : イベントのキャプチャの有無（true/false）IEにはありません。普通はfalseでOK
。element.addEventListener - MDC Doc Center
ブラウザの判別
IEではaddEventListenerは使えないのでエラーになります。これを利用します。
try{
}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
- イベント、イベントハンドラ
- 特定要素の表示/非表示 クリックすると開閉
- トグルスイッチ（０と１、trueとfalseを切り替え）条件分岐
- window.alert( )メソッド 警告ダイアログ
- さくらのレンタルサーバ ビジネスプロ
- ロリポップ！なら初心者でも安心！
WordpressやMovable Typeの簡単インストールや、ショッピングカートなど
誰でもカンタンに使える機能が満載！
- ヘテムル
- FC2WEB無料ホームページ
ページを開いた時
Now Loading.....
