Domの「イベントタイプ」と「イベントモニター」

4693 ワード

JavaScript html jsp ブラウザ IE

コード一:普通の書き方(簡単な書き方)

<html>
<title></title>
<head>
<script type="text/javascript">
	function clickme(){
		alert(88);
	}
</script>
</head>
<body>
	<div id="click" onclick="javascript:clickme();">click me</div>
</body>
</html>

コード二:ブラウザをまたぐ書き方を解くことができます.この表記は「事件の傍受」といいます.

<html>
<title></title>
<head>
<script type="text/javascript">
	window.onload = function(){
		var obj = document.getElementById("click");
		obj.onclick = function(){
			alert(55);
		}
	}
</script>
</head>
<body>
	<div id="click">click me</div>
</body>
</html>

ここのwindow.onloadはページのロードを表す時に呼び出します.この書き方はbodyの中にのタグがない場合に相当します.例えばJSPページのtop.jspやbottom.jspなどです.

Domの「イベント監聴」:
上記の「イベント傍受」の書き方は非常に単一で、「事件傍受」のラベルに「イベント傍受」を追加するだけで、複数の「イベント傍受」を追加することができません.以下に紹介する二つの方法はいずれも複数の「イベントモニター」を追加することができます.

1.     IE    “    ”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE     </title>
<script language="javascript">
function fnClick(){
	alert("     ");
	oP.detachEvent("onclick",fnClick);		//            
}
var oP;
window.onload = function(){
	oP = document.getElementById("myP");	//    
	oP.attachEvent("onclick",fnClick);		//      
}
</script>
</head>

<body>
	<div>
		<p id="myP">Click Me</p>
	</div>
</body>
</html>

2.          "    "。
      "false"  ：“     ”   “     ”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>  DOM     </title>
<script language="javascript">
function fnClick1(){
	alert("  fnClick1   ");
	//oP.removeEventListener("click",fnClick2,false);		//      2
}
function fnClick2(){
	alert("  fnClick2   ");
}
var oP;
window.onload = function(){
	oP = document.getElementById("myP");	//    
	oP.addEventListener("click",fnClick1,false);		//      1
	oP.addEventListener("click",fnClick2,false);		//      2
}
</script>
</head>

<body>
	<div>
		<p id="myP">Click Me</p>
	</div>
</body>
</html>

Domの「イベントタイプ」:
     IEブラウザのイベントオブジェクトはwindowオブジェクトの属性イベントです.
      op.onclick=function(){
             var oEvent=window.イベント;
      }
      Domにおいてイベントオブジェクトは、一意のパラメータとしてイベントハンドラ関数に伝達されなければならないと規定されている.
      op.onclick=function(oEvent)｛
             //....
      }
      ブラウザの互換性問題を解決するためには、次のような方法があります.
      op.onclick=function(oEvent)｛
             if(window.event)oEvent=window.イベント;
       }
例は以下の通りです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>     </title>
<script language="javascript">
function handle(oEvent){
	var oDiv = document.getElementById("display");
	if(window.event) oEvent = window.event;		//     ，      
	if(oEvent.type == "click")					//      
		oDiv.innerHTML += "     &nbsp&nbsp;";
	else if( oEvent.type == "mouseover")
		oDiv.innerHTML += "        &nbsp&nbsp;";
		
}
window.onload = function(){
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onclick = handle;
	oImg.onmouseover = handle;
}
</script>
</head>

<body>
	<img src="01.jpg" border="0">
    <div id="display"></div>
</body>
</html>

コンストラクタ内のset Dataとget Data