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>
<!--
// 셈플용 이벤트 등록 함수
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>