OPEN between Secret

Dom Level2 EventModel 본문

java/Java script & jQuery

Dom Level2 EventModel

해가꿈꾸는달 2014. 7. 28. 16:50
반응형

<!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>


Level 0 버전

----------------------------------------------------------------


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>



반응형
저작자표시

'java > Java script & jQuery' 카테고리의 다른 글

리터럴 종류  (0) 2014.07.29
java script  (0) 2014.07.28
여러 객체를 하나의 이벤트로 처리하는방법??  (0) 2014.07.28
Java script 에서 객체생성?  (0) 2014.07.28
Inner Function  (0) 2014.07.28
'java/Java script & jQuery' Related Articles more