Dom Level2 EventModel
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
<!--
window.onload = function(){
var arrObj = document.getElementsByTagName('h1');// h1 이라는 이름을 갖는 태그들이
for(var index in arrObj){
arrObj[index].onmouseover=function(){
this.style.background='#ff00ff';
}//function
arrObj[index].onmouseout=function() {
this.style.background='white';
}
}
};
//-->
</script>
</head>
<body>
<h1>Hello</h1>
<h1>Hello2</h1>
<h1>Hello3</h1>
</body>
</html>
----------------------------------------------------------------
window.event.srcElement 이게 위에 있는 this 라는 것 대신 그 소스 정보를 가져 오는 코드이다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
<!-- // 이건 옛날식으로 구현한것
window.onload= function(){
var header = document.getElementById('myheader');
if(header.attachEvent){ //IE Level2 EventModel
var handler = function(){
window.event.srcElement.style.color= 'red';
window.event.srcElement.detachEvent('onclick', handler);
}
header.attachEvent('onclick', handler);
}else{ //IE 제외한 Level2 EventModel
var handler=function(){
this.style.color='red';
this.removeEventListener('click', handler);
};
header.addEventListener('click', handler);
}
}
//-->
</script>
</head>
<body>
<h1 id="myheader">Click</h1>
<h1>Click</h1>
</body>
</html>