DOM 예제 : DOM 이벤트 객체의 속성정보를 모두 보여준다

이것은 window.onload 될때 모든 이벤트 객체 속성정보들을 리스트 형태로 보여주게 된다.
이 내용을 활용하게 되면 자바 스크립트 프로그램할때 좀더 세밀한 제어를 할수있을 것이다.

내용은 이벤트 객체의 속성정보를 DOM 으로 테이블을 생성한뒤 span 에 집어넣어
페이지를 만든다.

<style type="text/css">
  table {border-collapse: collapse;}

  thead {font-weight: bold;}
  td {padding: 2px 10px 2px 10px;}
  .odd {background-color: #efdfef;}
  .even {background-color: #ffffff;}
</style>

<script type="text/javascript">

function showEventProperties(e)
{
  function addCell(row, text) {
    var cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  var e = e || window.event;
  document.getElementById('eventType').innerHTML = e.type;

  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Property', 'Value'];
  var len = lableList.length;

  for (var i=0; i<len; i++) { 
    addCell(row, lableList[i]);
  }

  var tbody = document.createElement('tbody');
  table.appendChild(tbody);

  for (var p in e) {
    row = tbody.insertRow(-1);
    row.className = (row.rowIndex % 2)? 'odd':'even';
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, e[p]);
  }

  document.body.appendChild(table);
}
window.onload = function(event){
  showEventProperties(event);
}
</script>

<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>

결과 화면은 다음과 같다