JavaScript Dom addEventListener

dom_addEventListener.html

<!-- 
基礎Ajax + JavaScript 
P256-P257

onclike = name でイベントハンドラを設定できるが、
DOMのaddEventListenerメソッドでも設定できる。

addEventListenerメソッドの利点

・DOM標準仕様でイベントハンドらを設定できる。
　「onclick="name"」は標準仕様できはない。
公式サイトにも説明あり。
https://developer.mozilla.org/ja/docs/Web/API/Event

・１つの要素の１つのイベントに、「複数」のイベントハンドラを設定できる。
clickイベントに対して、複数の動作を登録できる。

・removeEventListnenerメッソドで、イベントハンドラを取り消すこともできます。

-->

<!--
昔ならがのイベント記述とDOMを使った公式記述との比較
-->

<p id="p1">この段落にイベントハンドラを設定します。</p>

<script type="type/javascript">
// 昔ながらの方法でのJavaScript
// window.onload,onclick イベント

window.onload = init;

function init() {
  var p = document.getElementById("p1");
  p.onclick = clickP;
}
function clickP() {
  this.style.backgroundColor = "pink";
}
</script>

<script type="text/javascript">
// DOM 使った公式な記述
// メッソドでイベントハンドラを設定
if (window.addEventLister)
  window.addEventListter("load",init2,false);
else if (window.attachEvent)
  //　IEでは,addEventListerが使えない。
  //  attachEventを使う。
  window.attachEvent("onload",init2);

function init2() {
  var p = document.getElementById("p1");
  // メッソドでイベントを設定
  if (p.addEventListener)
    p.addEventListener("click",clickP2,false);
  else if(p.attachEvent)
  　// IE用
    p.attachEvent("onclick",clickP2);
}
function clickP2() {
  alert("２つめのイベントハンドラです。")
}
</script>


<!-- **********************************
P258
イベントハンドラが実行される順番

イベントハンドラの実行は登録した順に実行される。
だが、IEは逆。あとから登録した順に事項される。

-->
<script type="text/javascript">
// 通常は、clickp1で、clickp2が実行される
// IEは、clickp2のあとで、clickp1が実行。
p.addEventListener("click",clickp1,false);
p.addEventListener("click",clickp2,false);

</script>