English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

JavaScriptの毎日学ぶべきイベント

実際にはこの記事は少し前に書いたものですが、sfの保存バグのために、当時多くのことを書いた結果、保存されずに残ってしまい、これは大きな遺憾でした。今日は少し時間があったので、補足しました。また、javascriptの学習のまとめとして完結させました。　

ここでは、jsに関連するイベントについて詳しく説明します。　

イベントハンドラ　

DOMではいくつかのイベントを定義しており、特定のイベントに応答する関数はイベントハンドラ（またはイベントリスナー）と呼ばれます。イベントハンドラの名前は「on」で始まるのが一般的で、例えば「onclick」などです。　

イベントバブルとキャプチャ　

イベントモデルとは、ページ内でイベントを受け取る順序を指します。IE、Firefox、Chromeブラウザはすべてイベントバブルです。イベントバブルとは、最初に最も具体的な要素がイベントを受け取り、逐次上位に非具体的なノードに伝播するという意味です。一方、イベントキャプチャはNetscapeが提案したもので、イベントバブルとキャプチャの具体的な図は以下の通りです：

　

イベントキャプチャはNetscapeが唯一サポートするイベントモデルですが、現在のIE9、FirefoxとGoogleもこのイベントモデルをサポートしています。　

イベントバブルの利点　

イベントがバブルメカニズムを持っているため、バブルの原理を使って、親レベルにイベントを追加し、実行効果をトリガーすることができます。この方法の利点はもちろん、パフォーマンスを向上させることです。

 <head lang="en">
 <meta charset="UTF-8>
 <title></title>
 <script type="text/javascript">
 window.onload = function () {
  var aUl = document.getElementsById("bubble");
  var aLi = aUl.getElementsByTagName("li");
  for(var i = 0;i<aLi.length;i++}
  aLi[i].onmouseover = function () {
   this.style.backgroundColor = "blue";
  };
  ali[i].onmouseout = function () {
   this.style.backgroundColor = "";
  }
  }
 };
 </script>
</head>
<body>
<div>
 <ul id = "bubble">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>
</body>

これにより、liにマウスイベントを追加することができます。ただし、多くのliがある場合、forループを使用するとパフォーマンスが影響されます。　

次に、この効果を実現するためにイベントデリゲーションを使用することができます。HTMLは変更されません：

 <script type="text/javascript">
 window.onload = function () {
 var aUl = document.getElementsById("bubble");
 var aLi = aUl.getElementsByTagName("li");
 //どんなイベントであれ、操作している要素がイベントソースである場合があります。
 // ie：window.event.srcElement
 // 標準では:event.target
 aUl.onmouseover = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  if(target.nodeName.toLowerCase() == "li"){
  target.style.background = "blue";
  }
 };
 aUl.onmouseout = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  if(target.nodeName.toLowerCase() = "li"){
  target.style.background = "";
  }
 }
 };
</script>

それでは、イベントのバブルの昇格を阻止する方法はどうでしょうか、以下の例を見てみましょう：

 <div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//イベントバブルを阻止した後、灰色のボックスをクリックすると、プロセス全体でダイアログが一度だけ表示されます（デフォルトの状況と比較してください）
function showMsg(obj,e)
{
 alert(obj.id);
 stopBubble(e)
}
//イベントバブルを阻止する関数
function stopBubble(e)
{
 if (e && e.stopPropagation)
 e.stopPropagation()
 else
 window.event.cancelBubble=true
}
</script>

黑色の外周の効果画像をクリックしてください：

　

DOM 0級イベントハンドラ　

JavaScriptでイベントハンドラを指定するのは、コールバック関数をこのイベントハンドラの属性に割り当てることです。各要素には独自のイベントハンドラ属性があります（属性は小文字、例えば：onclick）

 btn.onclick = function(){
 console.log('hello');
};

DOM 0級で指定されたイベントハンドラは要素のメソッドとして使用されます。したがって、thisは現在の要素を指します：

 var btn = document.getElementById('myDiv');
//DOM上で発生するイベントはイベントオブジェクトeventを生成します
btn.onclick = function (event) {
 alert(this.id);//myDiv 
};

DOM level 1

DOM level 1 HTMLとXMLドキュメントモデルに焦点を当てています。これにはドキュメントナビゲーションと処理機能が含まれています。　

DOM level 1 に 1998 年 10 月 1 日がW3C推奨標準。　

第2版の作業草案は 2000年 9 月 29 日。　

注目に値するのは：DOM level 0はW3C規範。そして、Netscape Navigator 30とIE 30の等価機能の1つの定義。　

DOM 2級イベントハンドラ　

DOM 2級はaddEventListener()とremoveEventListener()の2つのメソッドを定義し、これらはイベントハンドラの指定と削除の操作を行います。これらはすべて3つの引数を受け取ります：

1イベント名。例えば上のclick
2イベントハンドラとしての関数。
3ブール値（trueはキャプチャフェーズでイベントハンドラを呼び出すことを示し、falseはバブルフェーズを示す）

ElementオブジェクトのaddEventListenerメソッドを使用して、イベントのカールバック関数を定義することもできます。

 //element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
 console.log(this.id);
},false);

IEのイベントハンドラ　

IE9以前のIEブラウザではaddEventListener()とremoveEventListener()をサポートしていませんでした。　

他のブラウザとは異なり、IEはattachEvent()とdetachEvent()メソッドを使用してDOMにイベントハンドラを追加します。IEでは、8及び、もっとも古いバージョンではイベントの冒泡をサポートしているため、彼らは2つの引数を受け取ります：
1、イベントハンドラ名（前にonを付ける必要があります）
2、イベントハンドラ関数
attachEvent()を使用して追加されたイベントハンドラは以下の通りです：

 var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
 console.log(this.id);
});

attachEvent()メソッドを使用している場合、イベントハンドラはグローバルスコープで実行されるため、この時のthisはwindowになります。　

イベントオブジェクト
　
DOM上の特定のイベントがトリガーされた際には、eventオブジェクトが生成されます。このオブジェクトは、事件に関連するすべての情報を含んでいます。これには、事件を引き起こした要素、イベントのタイプ、特定のイベントに関連する他の情報が含まれます。eventオブジェクトは、イベントリスナーのコールバック関数に最初の引数として渡されます。このeventオブジェクトを使って、多くの現在のイベントに関連する情報を取得できます：
　type (String) — 事件の名前
target (node) — 事件の起源となるDOMノード
currentTarget63；(node) — 現在のコールバック関数がトリガーされたDOMノード（後で詳細に説明します）。
bubbles (boolean) — このイベントが冒泡イベントであるかどうかを示します（後で説明します）。
preventDefault(function) — このメソッドは、ブラウザのユーザーエージェントが現在のイベントに関連するデフォルトの動作をトリガーするのを阻止します。例えば、<a>要素のclickイベントが新しいページをロードするのを阻止するようにします。
cancelable (boolean) — この変数は、このイベントのデフォルトの動作が event.preventDefault() コールバックを呼び出して阻止できるかどうかを示します。
stopPropagation (function) — さらなるキャプチャやバブルのキャンセルを取消します。bubblesがtrueの場合にこのメソッドを使用します。
eventPhase：数字を返し、イベントが現在どのフェーズにいるかを示します。0はイベントがDOMの表层からターゲット要素に向かって伝播を始めることを示します。1キャプチャフェーズ。2イベントがターゲット要素に到達する場合。3バブルフェーズ。

さらに、イベントオブジェクトは多くの他の属性も持つ可能性がありますが、それらは特定のeventに対してのみです。例えば、マウスイベントにはclientXとclientY属性が含まれており、現在の視窗内のマウスの位置を示します。　

また、stopPropagation()メソッドは、DOM内でイベントの伝播を即座に停止するために使用されます。つまり、さらなるイベントのバブルやキャプチャをキャンセルします。

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 alert("clicked");
 event.stopPropagation();
};
//document.body上のイベントハンドラをトリガーしないように
document.body.onclick = function (event) {
 alert("Body clicked"); 
};

イベントハンドラの実行中にのみeventオブジェクトが存在し、イベントハンドラの実行が完了するとeventオブジェクトは自動的に破棄されます。　

IEのイベントオブジェクト　

DOM 0レベルでイベントハンドラを追加する場合、eventオブジェクトはwindowオブジェクトの属性として存在します：

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 var event = window.event;
 alert(event.type);//click
};

IEのeventオブジェクトも、作成されたイベントに関連する属性とメソッドを含んでいます。
cancleBubble 布尔値　　 デフォルト値はfalseですが、trueに設定するとイベントのバブルをキャンセルできます。DOMのstopPropagation()メソッドと同じ。
returnValue　　 布尔値　　 デフォルト値はtrueで、falseに設定するとデフォルトのイベント動作をキャンセルします。DOMのpreventDefault()と同じ。
srcElement　　要素　 　 イベントのターゲット、DOMのtarget属性と同じ。
type　　　　 文字列　　 起動したイベントのタイプ。

clickイベント　

ユーザーがクリックした後、eventオブジェクトには以下の属性が含まれます。
　pageX，pageY：クリック位置がHTML要素上の座標、単位はピクセルです。
clientX，clientY：クリック位置がビューポート（viewport）上の座標、単位はピクセルです。
screenX，screenY：クリック位置がデバイスのディスプレイ上の座標、単位はデバイスのハードウェアピクセルです

clientX，clientY　

図示：clientXとclientY、その値はイベントが発生したときのマウス指標が視口内の水平および垂直座標（スクロールバー領域を含まない）を示します

オフセット

以下の4個の属性が要素のオフセットを取得できます。

　　 （1）offsetHeight：要素が垂直方向に占めるスペースの大きさ、ピクセル単位です。要素の高さ、（見える）水平スクロールバーの高さ、上フレーム高さ、下フレーム高さを含みます。

　　 （2）offsetWidth：要素が水平方向に占めるスペースの大きさ、ピクセル単位です。要素の幅、（見える）垂直スクロールバーの幅、左フレーム幅、右フレーム幅を含みます。

　　 （3）offsetLeft：要素の左外框から含む要素の左内框までのピクセル距離です。

　　 （4）offsetTop：要素の上外框から含む要素の上内框までのピクセル距離です。

pageX，pageY　

これらの属性は、ページ内のマウスカーソルの位置を示しています。ページがスクロールしていない場合、pageX、pageYの値はclientX、clientYの値と同じです　

スクロールサイズ　

スクロールサイズ、スクロール内容を含む要素のサイズを指します。

　　　 以下は4個のスクロールサイズに関連する属性があります。

　　 （1）scrollHeight：スクロールバーがない場合、要素の内容の総高さです。

　　 （2）scrollWidth：スクロールバーがない場合、要素の内容の総幅です。

　　 （3）scrollLeft：コンテンツエリアの左に隠れているピクセル数です。この属性を設定することで、要素のスクロール位置を変更できます。

　　 （4）scrollTop：コンテンツエリアの上に隠れているピクセル数です。この属性を設定することで、要素のスクロール位置を変更できます。

焦点イベント　

焦点イベントはページの要素が焦点を得たり失ったりする際にトリガーされ、以下があります4個の焦点イベント：
　1.blur：要素が焦点を失うとトリガーされ、このイベントはバブルではありません。
　2.focus：要素が焦点を得るとトリガーされる。バブルではありません。
　3.focusin：要素が焦点を得るとトリガーされ、バブル
　4.focusout：要素が焦点を失うとトリガーされ、バブル　

マウスイベント　

DOM 3級で定義されています9個のマウスイベント：
　click：ユーザーがマウスのメインボタン（通常は左ボタンまたはEnterキー）をクリックしたときにトリガーされます。

dbclick：ユーザーがマウスをダブルクリックしたときにトリガーされます。

mousedown：ユーザーがマウスの任意のボタンを押下するとトリガーされる、このイベントはキーボードでトリガーすることはできません。

mousemove：マウスが某要素の周りを移動したときに繰り返しトリガーされます。このイベントはキーボードイベントではトリガられません。

mouseout：マウスが要素から離れたときにトリガーされます。キーボードではトリガられません。

mouseover：マウスが要素に入ったときにトリガーされます。キーボードではトリガーできません。

　mouseenter：mouseoverに似ていますが、バブルしません。光標が後裔要素に移動してもトリガされません。

mouseleave：mouseoutに似ていますが、バブルしません。要素の上ではトリガされません。

mouseup：マウスボタンを解放したときにトリガーされます。キーボードではトリガーできません。

マウスイベントハンドラに渡されるイベントオブジェクトにはclientXとclientY属性があります。これらは、マウス指標がコンテナウィンドウに対する座標を指定します。ウィンドウのスクロールオフセットを加えることで、マウス位置をドキュメント座標に変換できます。
ページ上のすべての要素はマウスイベントをサポートしています。mouseenterとmouseleave以外のすべてのイベントはバブルし、デフォルトの動作はキャンセル可能です。しかし、マウスイベントのデフォルトの動作をキャンセルすることで、他のイベントに影響を与える可能性があります。なぜなら、一部のマウスイベントは相互依存しているからです。

ドラッグイベント　

（1）dragイベント
　dragイベントは、ソースオブジェクトがドラッグされている間にトリガーされます。
（2）dragstart、dragendイベント
　dragstartイベントは、ユーザーがマウスでオブジェクトをドラッグし始めたときにトリガーされます。dragendイベントは、ドラッグを終了したときにトリガーされます。
（3）dragenter、dragleaveイベント
　dragenterイベントは、ソースオブジェクトがターゲットオブジェクトにドラッグされ、ターゲットオブジェクト上でトリガーされます。dragleaveイベントは、ソースオブジェクトがターゲットオブジェクトから離れた後に、ターゲットオブジェクト上でトリガーされます。
（4）dragoverイベント
　dragoverイベントは、ソースオブジェクトが別のオブジェクトの上をドラッグしているときに、後者の上でトリガーされます。
（5）dropイベント

　ソースオブジェクトがターゲットオブジェクトの上にドラッグされ、ユーザーがマウスを離したときに、ターゲットオブジェクト上でdropイベントがトリガーされます。

これでこの記事のすべての内容が終わります。皆様の学習に役立つことを願っています。また、ナイアラチュートリアルのサポートを多くいただければ幸いです。

基礎教程
おすすめ