Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형
이것은 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>

결과 화면은 다음과 같다





반응형
Posted by 녹두장군1
,