JavaScript DOM Events

dom_events.html

<!--***************************
DOM EVENTS

基礎 Ajax + JavaScript
P253

DOMのイベントは、Eventオブジェクトのこと。

Eventオブジェクトで取得できる内容はいかにまとめられている。
https://developer.mozilla.org/ja/docs/Web/API/Event

-->

<!-- 
各ブラウザで共通してEvent属性を使えるようにする方法
-->
<p><input id="button1" type="button" value="Click Me!"></p>

<script type="text/javascript">
  btn = document.getElementById("button1");
  btn.onclick = buttonClick;
  
  function buttonClick(evt){
    // IEの場合は、引数evtがない
    if(!evt) evt = window.event;  // IEの場合
    
    // clientX マススのX座標
    alert("X座標は、" + evt.clientX);
  }
</script>


<!-- *******************************************
P255
-->
<p id="p1"><span>DOM</span>は、<span>Document Object Model</span>の略です。</p>

<script type="text/javascript">
  p = documnet.getElementById("p1");
  p.onclick = changeColor;
  
  function changeColor(evt){
    if(!evt) evt = window.event;
    var elem; // クリックした要素
    
    // targetやsrcElementは実際にクリックした要素。
    if (evt.target) elem = evt.target;
    
    // IEには、targetプロパティがない
    else if (evt.srcElement) elem = evt.srcElement;
  
    if(elem.style.backgroundColor == "black") {
      elem.style.backgroundColor = "white";
      elem.style.color = "black";
    }
    else {
      elem.style.backgroundColor = "black";
      elem.style.color = "white";
    }
  }
</script>