goo blog　サービス終了のお知らせ　

Carpe Diem

～日本一周ブログ旅 (分割) ～

addEventListenr

2011年06月14日 21時05分46秒 | ＩＴ
仕事で使うのはIE限定なのでattachEventでもいいがより共通関数っぽくしてみた。

attachEvent （第一引数 event はイベント名文字列（プレフィックスに 'on' を含む）、第二引数 実行する関数）
イベントハンドラを開放するには、detachEvent メソッドを使うそうだ。（出番がなさそうだ）

【コード】
<html>

<head>

<script type="text/javascript">

function addEventListener( target , event , func ){

	var element = document.getElementById(target) ;

	if ( element == null ) { return false ; }

	element.attachEvent( 'on' + event , func ) ;
	
}

function func1( ){
	alert('A') ;
}

function func2( ){
	alert('B') ;
}

//引数のあるバージョン
function func3( val ){
	alert( val ) ;
}

window.onload = function (){

	addEventListener('targetA' , 'click' , func1 ) ;
	addEventListener('targetA' , 'click' , func2 ) ;

	addEventListener('targetB' , 'click' , function(){ func3('1'); } ) ;
	addEventListener('targetB' , 'click' , function(){ func3('2'); } ) ;
	addEventListener('targetB' , 'click' , function(){ func3('3'); } ) ;
	addEventListener('targetB' , 'click' , function(){ func3('4'); } ) ;
	addEventListener('targetB' , 'click' , function(){ func3('5'); } ) ;

}

</script>

</head>

<body>

<input type="button" id="targetA" value="send" />
<input type="button" id="targetB" value="send" />

</body>

</html>


注意点：イベント名がすべて小文字でないとＮＧ
　　　（実行時エラーにはならず、呼び出しも行われない。変なイベントとして登録されているようだ）

メモ：上記の場合、"B"(func2)が先に表示(実行）され"A"(func1)が先に表示(実行）された。
　　　内部はどうもスタックのようになっているんだろうと思ったがIEでは順番は滅茶苦茶（保証されていない）との情報が・・・
　　　確かに関数を複数登録すると呼び出しの順番が滅茶苦茶になるようだ。（引数ありの例では順番が守られなかった）

指定要素を非表示にする

2011年06月13日 20時47分38秒 | ＩＴ
【指定要素を非表示にするサンプル】

やりたいこと：指定された要素を画面から見えなくする

コード：
function ElementHiddenByID( id ) {

	var target = document.getElementById(id) ;

	if ( target == null ) { 
		return ; 
	} 

	target.style.display="none" ;

}

注意点：要素を非表示にしてしまうと<div>タグなどで括って領域のstyle指定をしておかないと、
　　　　要素そのものがなくなってしまうのでレイアウトが崩れる恐れがある。

メモ：clearNodeでも見た目には同様の効果が得られる。
　　　ただし、clearNodeの場合、ノードそのものがメモリ上から削除されるので、再利用が不可能となってしまう。

DOMのNodeType

2011年06月13日 19時59分45秒 | ＩＴ
【NodeTypeで返却される値の一覧】
NodeType名称意味備考
1ELEMENT_NODE要素ノードタグ
2ATTRIBUTE_NODE属性ノードタグ内の属性
3TEXT_NODETEXTノード開始タグと終了タグの間のテキスト部分
4CDATA_SECTION_NODECDATAノードCDATAセクション
5ENTITY_REFERENCE_NODE実体参照ノード実体参照
6ENTITY_NODE実体ノードエンティティ名
7PROCESSING_INSTRUCTION_NODE処理命令ノード処理命令
8COMMENT_NODE注釈宣言ノードコメント
9DOCUMENT_NODE文書ノード文書
10DOCUMENT_TYPE_NODE文書型宣言ノード文書型名
11DOCUMENT_FRAGMENT_NODE文書切片ノード最小の文書オブジェクト
12NOTATION_NODE表記法ノード表記法名

指定された要素配下のINPUTタグをプロテクトする

2011年06月10日 22時58分30秒 | ＩＴ
久しぶりに仕事でjavascriptを利用する機会が生まれた。

後輩が悩んでいたので試しに自分で書いてみた。

【やりたいこと】

入力系の画面で登録ボタンを押したらサーバー側で入力チェックをして、
結果OKなら全プロテクトをして確認画面を出す。



【以下書いてみたコード】

//ＩＤ名配下の要素をプロテクトする

function allProtectById( id ) {

	if( id == null ) {return ;}

	var nodes = document.getElementById( id ).childNodes;

	if (nodes == null ) {return;}

	for( var i=0 , size=nodes.length; i<size; i++ ) {

		allProtect( nodes(i) );

	}

}



//要素配下のをINPUT/SELECTタグにプロテクトを施す

function allProtect( node ) {

	var nodes = node.childNodes ;

	//更に子要素がある場合

	if (nodes != null ) {

		for( var i=0 , size=nodes.length; i<size; i++ ) {

			//タグ

			if ( node.nodeType == 1 ) {

				allProtect( nodes(i) );

			}

		}

	}

	//自身のプロテクト

	if ( node.nodeType == 1 ) {

		if (node.tagName == "INPUT" || node.tagName == "SELECT"){

			node.setAttribute('disabled','true');

		}		

	}

}

</pre>



これを確認画面のonloadイベントで呼び出せばOK。

最初は画面内を捜査して全部プロテクトしようかとも考えたが、ＩＤ指定にしたほうが後々再利用できそう。



注意点としてはＩＤ指定なのでプロテクトした要素のトップには必ずＩＤを指定することくらいかな。