２）イベントリスナー関数の引数のイベントオブジェクトを使う
　①イベントオブジェクトのプロパティ
　　　イベントリスナー関数は、イベントが発生したオブジェクト(エレメント)からイベントオブジェクトを引数として受け取ります。
　　　以下にイベントオブジェクトのプロパティについて説明します。

　　　
イベントオブジェクトのプロパティ プロパティの内容
IEの場合 IE以外の場合
altKey altKey altキーが押されていれば「true」、押されてい倍場合は、「false」を持ちます。
左右どちらが押されていても「true」になります。
altLeft   左のaltキーが押されていれば「true」、押されてい倍場合は、「false」を持ちます。
button   マウスの右クリック「１」、中クリック「４」、右クリック「２」の値を持ちます。
  button マウスの右クリック「０」、中クリック「１」、右クリック「２」の値を持ちます。
  which マウスの右クリック「１」、中クリック「２」、右クリック「３」の値を持ちます。
  charCode キーのキャラクタコードの値を持ちます。特殊文字の値は持たない。
clientX clientX イベントが発生したクライアント領域（ウィンドウ）上のX座標の値を持ちます。
clientY clientY イベントが発生したクライアント領域（ウィンドウ）上のY座標の値を持ちます。
ctrlKey ctrlKey ctrlキーが押されていれば「true」、押されてい倍場合は、「false」を持ちます。
左右どちらが押されていても「true」になります。
ctrlLeft   左のctrlキーが押されていれば「true」、押されてい倍場合は、「false」を持ちます。
  currentTarget
[object HTMLParagraphElement] 		イベントリスナーが登録されている要素を表します。
fromElement fromElement イベントが発生したときマウスの移動元の要素を示すオブジェクトを表します。
  initEvent document.createEvent（）で作成されたイベントオブジェクトの初期化をします。
  initMouseEvent document.createEvent（）で作成されたマウスイベントの初期化をします。
keyCode keyCode キーイベントで押されたキーのコードを持っています。
  layerX レイヤー上のX座標の値を持っています。
  layerY レイヤー上のY座標の値を持っています。
offsetX offsetX ドキュメント上の要素（エレメント）上のX座標の値を持っています。
offsetY offsetY ドキュメント上の要素（エレメント）上のY座標の値を持っています。
  pageX ページ上ののX座標の値を持っています。
  pageY ページ上ののY座標の値を持っています。
screenX screenX ディスプレイ上のX座標の値を持っています。
screenY screenY ディスプレイ上のY座標の値を持っています。
shiftKey shiftKey shiftキーが押されていれば「true」、押されてい倍場合は、「false」を持ちます。
左右どちらが押されていても「true」になります。
shiftLeft：false   左のshiftキーが押されていれば「true」、押されてい倍場合は、「false」を持ちます。
srcElement
[object HTMLParagraphElement]		 srcElement
[object HTMLParagraphElement] 		実際にイベントが発生した要素を示すオブジェクトを表します。
  target
[object HTMLParagraphElement] 		実際にイベントが発生した要素を示すオブジェクトを表します。
type type イベントの種類（clickなど）を持っています。
x x 配置された親要素（通常は BODY 要素）上のX座標の値を持ちます。
y y 配置された親要素（通常は BODY 要素）上のY座標の値を持ちます。
　　　　他にもありますが、よく分からないので書いてありません。

　②srcElementオブジェクトとtargetオブジェクトのプロパティ
　　　srcElementオブジェクトとtargetオブジェクトは、実際にイベントが発生したドキュメント上の要素（エレメント）のオブジェクトです。
　　　以下にそのプロパティの説明をします。
　　　
srcElementとtargetのプロパティ プロパティの内容
srcElement（IEの場合） target（IE以外の場合）
accept accept  
accessKey accessKey  
align align <tr>要素のalign属性に指定した水平方向の位置情報が格納されています。
値には、left（左）、center（中央）、right（右）、justify（両端揃え）
attributes attributes ノードの属性の一覧を返します。
  baseURI このホームページのアドレス（URL）を持ちます。
checked checked ラジオボタンやチェックボックスがチェックされていると「true」、チェックされていないと「false」の値を持っています。
className className エレメントのclassを取得/設定することができます。
clientHeight clientHeight エレメントの高さをも持っています。
clientLeft clientLeft 要素の左ボーダーの幅のピクセル数を持っています。
clientTop clientTop 要素の上ボーダーの幅のピクセル数を持っています。
clientWidth clientWidth element 内のピクセル単位の幅の値を持っています。
defaultChecked defaultChecked チェックの有無の初期値を持っています。チェックされていると「true」、チェックされていないと「false」の値を持っています。
defaultValue defaultValue value値の初期値を持っています。
disabled disabled エレメントの使用を有効／無効に設定をします。「true」は、無効、「false」は有効
id id エレメントの「id」属性の値を持っています。
innerHTML innerHTML

document.getElementByTagName("タグ名")で取得したタグの子ノードのHTMLを持っています。変更もできます。
innerText innerText document.getElementByTagName("タグ名")で取得したタグの子ノードのTEXTを持っています。変更もできます。
name name エレメントの「name」属性の値を持っています。
nodeName nodeName ノード名を返します。
nodeType nodeType ノードのタイプを返します。
nodeValue nodeValue ノードの値を返します。
offsetHeight offsetHeight 親の座標軸を基準とした相対座標のエレメントの高さを返します。
offsetLeft offsetLeft ウィンドウを基準としたエレメントの左側の座標を返します。
offsetParent offsetParent オブジェクトの上と左のオフセットを基準となるコンテナエレメントのオブジェクトを返します。
offsetTop offsetTop 親の座標軸を基準とした相対座標のエレメントの上端の座標を返します。
offsetWidth offsetWidth ドキュメントの左上の角を基準としたエレメントの幅を返します。
outerHTML outerHTML document.getElementByTagName("タグ名")で取得したタグ全てを返します。
scrollHeight scrollHeight ドキュメント全体の高さを返します。
scrollLeft scrollLeft エレメントの左端部と現在見えているエレメントの最左端部との間の距離を返します。
scrollTop scrollTop エレメントの上部と現在見えているエレメントの最上部との間の距離を返します。
scrollWidth scrollWidth ドキュメント全体の幅を返します。
style style styleオブジェクトでCSSの設定・変更ができます。
tabIndex tabIndex オブジェクトのタブインデックス値を返します。
tagName tagName 指定したオブジェクトのタグ名を返します
textContent textContent innerHTMLとほぼ同じですが、「&lt;p&gt;text&lt;/p&gt;」に対しても「<p>text</p>」と返します。
title title HTMLのタイトルに表示されている値を返します。変更することもできます。
value value タグに設定したvalue値を返します。変更することもできます
　　　　他にもありますが良く分からないので書いていません。

　③前ページ（１０　２）③）をイベントオブジェクトを使って処理をスマートにします。
　　＜ファイル名：js11-2-3.html＞
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>イベントオブジェクトを使って処理する</title>
<script type="text/javascript" src="js11-2-3.js"></script>
</head>
<body>
イベントオブジェクトを使って処理する<br />
<form id="formId" name="formName">
氏名：<input type="text" name="tfName1" id="tfId1"><br>
住所：<input type="text" name="tfName2" id="tfId2"><br>
E-Mail：<input type="text" name="tfName3" id="tfId3"><br>
</form>
</body>
</html>
　　　＜ファイル名：js11-2-3.js＞
setEventListener(window,"load",window_onLoad);
function setEventListener(obj,event,func){
    if(navigator.appName.indexOf("Microsoft")>-1){
        obj.attachEvent("on"+event,func);
        browserFlag="ie";  //IEのフラグをグローバルに設定しています。
    }
    else{
        obj.addEventListener(event,func,false);
        browserFlag="other";  //IE以外のフラグをグローバルに設定しています。
    }
}

function window_onLoad(){
    jsTfId1=document.getElementById("tfId1");
    jsTfId1.style.color="#b8b8b8";
    jsTfId1.value="名前を入力してね。";
    setEventListener(jsTfId1,"focus",valueClear);
    setEventListener(jsTfId1,"blur",valueSet);
    jsTfId2=document.getElementById("tfId2");
    jsTfId2.style.color="#b8b8b8";
    jsTfId2.value="住所を入力してね。";
    setEventListener(jsTfId2,"focus",valueClear);
    setEventListener(jsTfId2,"blur",valueSet);
    jsTfId3=document.getElementById("tfId3");
    jsTfId3.style.color="#b8b8b8";
    jsTfId3.value="メルアドを入力してね。";
    setEventListener(jsTfId3,"focus",valueClear);
    setEventListener(jsTfId3,"blur",valueSet);
}

function valueClear(e){  //引数の「e」は、イベントが発生したオブジェクトのイベントオブジェクトを受け取っています。
   if(browserFlag=="ie"){  //IEには、「target」オブジェクトが存在しないので代わりに「srcElement」オブジェクトを使っています。
       var evt=e.srcElement;
   }
   else{  //IE以外のブラウザは、「target」オブジェクトを使っています。
       var evt=e.target;
   }
   if(evt.id=="tfId1" && evt.value=="名前を入力してね。"){
       evt.value="";
       evt.style.color="orange";
   }
   if(evt.id=="tfId2" && evt.value=="住所を入力してね。"){
       evt.value="";
       evt.style.color="orange";
   }
   if(evt.id=="tfId3" && evt.value=="メルアドを入力してね。"){
       evt.value="";
       evt.style.color="orange";
   }
}

function valueSet(e){
   if(browserFlag=="ie"){
       var evt=e.srcElement;
   }
   else{
       var evt=e.target;
   }
   if(evt.id=="tfId1" && evt.value==""){
       evt.style.color="#b8b8b8";
       evt.value="名前を入力してね。";
   }
   if(evt.id=="tfId2" && evt.value==""){
       evt.style.color="#b8b8b8";
       evt.value="住所を入力してね。";
   }
   if(evt.id=="tfId3" && evt.value==""){
       evt.style.color="#b8b8b8";
       evt.value="メルアドを入力してね。";
   }
}