script

마우스 클릭 이벤트

aneyh.c 2014. 5. 22. 17:20
<script type="text/javascript"> 
<!-- 
// 셈플용 이벤트 등록 함수 
function myAttachEvent(eventObj, event, eventHandler){  
   if(eventObj.addEventListener) // IE외 
   eventObj.addEventListener(event, eventHandler, false); 
   else if(eventObj.attachEvent){ 
      event = 'on'+event; 
      eventObj.attachEvent(event, eventHandler); 
   } 

//--> 
</script> 

1. Tag에 직접적용
<input type="button" value="클릭" onclick="alert('클릭 하였습니다.')"
<hr> 

2. Tag에 함수호출
<script type="text/javascript"> 
<!-- 
function myClick(){ 
   alert('클릭 하였습니다.') 

//--> 
</script> 
<input type="button" value="클릭" onclick="myClick()"
<hr> 

3. Tag에 함수할당
3.1 직접할당 #1(테그 아래에서 할당)

<input type="button" value="클릭" id="myClick1"> 
<script type="text/javascript"> 
<!-- 
document.getElementById('myClick1').onclick = myClick; 
//--> 
</script> 
<Br> 
3.2 직접할당 #2(window.onload 이벤트에서 할당)
<script type="text/javascript">
<!-- 
myAttachEvent(window,'load', function(){ 
   document.getElementById('myClick2').onclick = myClick; 
}); 
//--> 
</script> 
<input type="button" value="클릭" id="myClick2"> 
<Br> 
3.3 직접할당 #3(람다함수 할당)
<script type="text/javascript"> 
<!-- 
myAttachEvent(window,'load', function(){ 
   document.getElementById('myClick3').onclick = function(){ 
      alert('클릭 하였습니다.') 
   }; 
}); 
//--> 
</script> 
<input type="button" value="클릭" id="myClick3"> 
<Br> 
3.4 직접할당 #3(이벤트 할당함수 이용)
<script type="text/javascript"> 
<!-- 
myAttachEvent(window,'load', function(){ 
   var eventObj = document.getElementById('myClick4'); 
   var event='click'; 
   if(eventObj.addEventListener) // IE외 
             eventObj.addEventListener(event, myClick, false); 
         else if(eventObj.attachEvent){ 
                event = 'on'+event; 
                eventObj.attachEvent(event, myClick); 
         } 
}); 
//--> 
</script> 
<input type="button" value="클릭" id="myClick4"> 
<hr>