JavaScript 이벤트 핸들러 처리방법 세가지

 

이벤트 처리방법1 - 직접 태그에 명시하는 방법   <h1 onclick="this.style.backgroundColor='yellow' " style="background-color: skyblue"> 이벤트 처리방법1</h1>

 

 

 

이벤트 처리방법2 - 태그에 ID를 걸어주고, 스크립트로 제어하는 방법       <script type="text/javascript"> //문서가 로딩이 끝나면 window.onload = init; function init() {  document.getElementById("h2").onclick = function() {       this.style.backgroundColor='yellow';      } } </script>

 

 

 

 

이벤트 처리방법3 - 모두 스크립트로 제어하는 방법   var h2 = documnet.getElementById("h2");       try {             h2.addEventListener("click", function() {                   this.style.backgroundColor = 'pink';             }, false)             h2.addEventListener("onclick", function() {                   alert("change color");             }, false)       } catch (error) {             h2.attachEvent("onclick", function() {                   event.srcElement.style.backgroundColor = 'pink';             }, false)             h2.attachEvent("onclick", function() {                   alert("change color");             }, false)       }       //어떤 이벤트 타입인지 줘야함. on을 빼고 준다고 생각하면 됨 즉 onClick()에서 click만       //처리방법3으로 한다면, 둘다 됨. 아니면 모든걸 하나로 만들어야 하기 때문에 밑의 방법이 좋을듯       //근데 익8에서는 잘 안돌아간다. try catch를 붙이도록 한다. 그리고 나서 익스플로러만의 거시기를 추가해 주어야함       //bold체로 되는게 바뀌는거다       //게다가 this도 안먹고 event.target으로 지정해주어야함 (this대신)       //동작하는 순서는 익스플로러는 지멋대로고 크롬은 앞에서부터 나온다       //dom level2만 지원하는 거에서만 먹힌다. 익8이하에는 어쩔수없이 써야한다 </script>