블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

'이벤트'에 해당되는 글 2

  1. 2006.12.12 이벤트 Fake!!!
  2. 2006.12.06 키입력 이벤트처리2
2006. 12. 12. 11:03 Programing/HTML/JavaScript/CSS

Fake : 1 위조하다(counterfeit);(되는 대로) 꾸며내다, 날조하다(fabricate) 《up》
2 속이다(deceive);좀도둑질하다, 훔치다;윤색하다
3 …인 체하다, 가장하다(pretend)
4【스포츠】 페인트하다 《out》
5【재즈】 즉흥 연주하다(improvise)

여기서는 '가장하다' 또는 '속이다'의 뜻이 어울릴것같다.




initMouseEvent

void initMouseEvent(String  typeArg,
boolean canBubbleArg,
boolean cancelableArg,
org.w3c.dom.views.AbstractView viewArg,
int detailArg,
int screenXArg,
int screenYArg,
int clientXArg,
int clientYArg,
boolean ctrlKeyArg,
boolean altKeyArg,
boolean shiftKeyArg,
boolean metaKeyArg,
short buttonArg,
EventTarget  relatedTargetArg)

initMouseEvent 메소드는,DocumentEvent 인터페이스에 의해 작성된 MouseEvent
값을 초기화할 경우에 사용합니다. 이 메소드는,MouseEventdispatchEvent 메소드를
개입시켜 디스팟치 되기 전에 한해 불려 갑니다만, 필요한 경우는 초기화할 단계에서 여러
차례 불려 가는 일도 있습니다. 여러 차례 불려 갔을 경우는, 마지막 호출이 우선됩니다.


파라미터:
typeArg - 이벤트의 형태
canBubbleArg - 이벤트를 버블 할 수 있을지 어떨지
cancelableArg - 이벤트의 디폴트 액션을 억제할 수 있을지 어떨지
viewArg - EventAbstractView
detailArg - Event 의 마우스의 클릭수
screenXArg - Event 의 화면상에서의 x 좌표
screenYArg - Event 의 화면상에서의 y 좌표
clientXArg - Event 의 클라이언트의 x 좌표
clientYArg - Event 의 클라이언트의 y 좌표
ctrlKeyArg - Event 의 사이에 Ctrl 키가 밀렸는지 어떠했는지
altKeyArg - Event 의 사이에 Alt 키가 밀렸는지 어떠했는지
shiftKeyArg - Event 의 사이에 Shift 키가 밀렸는지 어떠했는지
metaKeyArg - Event 의 사이에 Meta 키가 밀렸는지 어떠했는지
buttonArg - Event 의 mouse button
relatedTargetArg - Event 에 관련하는 EventTarget



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Event Fake </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function attachEvent(obj,evtType,handler){
if(typeof obj == 'object' && obj != 'undefined' && obj != '' && obj != null){
obj.addEventListener(evtType,eval(handler),false);
}
}

function initEvt(){
var btn  = document.getElementById('btn');
var btn2 = document.getElementById('btn2');

attachEvent(btn,'click','kk');
attachEvent(btn2,'click','jj');
}

function kk(){
alert(1);

var obj = document.getElementById('btn2');
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click',true,true,window,0,0,0,0,0,false,false,false,false,0,null);

obj.dispatchEvent(evt);
}

function jj(){
alert(2);
}
//-->
</SCRIPT>
</HEAD>

<body onload=" initEvt();">
<input type="button" id="btn" value="click" />
<input type="button" id="btn2" value="click2" />
</body>
</html>


위 코드를 복사해서 실행해 보자.

버튼을 번갈아 눌러보자
어떤 일이 일어나는가?

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

[HTML] FIELDSET과 LEGEND  (0) 2007.01.05
[CSS] onMouseOver,onMouseOut은 그만!!  (17) 2007.01.03
키입력 이벤트처리  (2) 2006.12.06
테이블(Table) 그리기  (0) 2006.11.30
CSS Box Model  (0) 2006.11.30
posted by 초딩입맛제주아재
2006. 12. 6. 13:37 Programing/HTML/JavaScript/CSS
키 입력 이벤트는 다양한 곳에 쓰이고 있다.
은행사이트의 계좌 입력 폼이라던지, 금액 입력 폼,
기타 이메일 입력 폼이나 키입력에 따른 처리가 필요한 어떠한 경우라도
키입력 이벤트는 쓰여진다.

금액:<input type="text" name="price" value="" onKeydown=" keyDownCheck(this);" />

위 코드를 예를 들어보면,
금액을 입력 하는 폼이므로 숫자 이외의 값이 들어가선 안된다.(경우에 따라서는 콤마도 출력 할 수 있겠지만 숫자만 입력으로 받아들이고 콤마는 내부적으로 처리해주는것이 좋겠다)

keydown 이벤트를 걸어준 이유는 사용자로부터 입력 받은 값을 체크해서
숫자가 아니면 키입력을 흘려버려야 하기때문이다.
만약 keyup 이벤트를 걸면 입력한 문자 or 숫자가 폼에 먼저 찍힌다음 이벤트 핸들러를 통해서
걸러주게 되므로 keydown이 좋은 선택이 되겠다.

keypress의 경우 firefox같은 모질라 계열의 브라우져에서 지원하지 않으므로 크로스 브라우징이
필요한 페이지에서는 사용 할 수 없다.

한가지 주의 해야 할 점은 키입력 이벤트 발생 시점이 IE와 모질라가 서로 조금씩 다르다는 것이다.
이 부분의 처리는 코드를 직접 보자.

우선 위 코드를 크로스브라우징이 가능하도록 수정하자.
인라인 스크립트는 지양해야 하므로 이벤트 핸들러를 따로 지정해주자.


금액: <input type="text" id="price" name="price" value="" />

스크립트
<script language="JavaScript">
<!--
var priceObj = document.getElementById('price');

if(window.event){
  priceObj.attacheEvent('onkeydown',priceEvtHandler);
}else{
  priceObj.addEventListener('keydown',priceEvtHandler,false);
}

function priceEvtHandler(e){
  var keyValue;

  if(window.event){
       keyValue = window.event,keyCode;
  }else{
       keyValue = e.keyCode;
  }

  if(keyValue == 13){      //enter
       return false;
  }else if(keyValue == 8){ //backspace
       return false;
  }else if((keyValue > 57 || keyValue < 48) && (keyValue > 105 || keyValue < 96)){
       if(window.event){
           window.event.returnValue = false;
       }else{
           e.preventDefault();
       }
  }
}
-->
</script>

다듬어지지 않은 코드이지만 그리 길지 않은 코드이다.
이벤트핸들러 priceEvtHandler를 살펴보면
keyValue 값으로 분기를 한다.
백스페이스는 입력된 숫자의 삭제를 위해 필요하므로 꼭 넣어 줘야 하며
엔터키의 경우는 필요에 따라 코드를 작성해주면 된다.
여기서는 아래쪽 분기문이 중요하다.
키코드 48~57은 기본키 0에서 9까지의 아스키코드값이고
96~105는 숫자패드 0에서 9까지의 아스키코드값이다.
사용자 입력이 이 범위를 벗어나면 이벤트를 그냥 흘려보내야 한다.
이때 이벤트를 흘려보내는 방식이 IE와 Mozila가 서로 다르다.
IE는 property값을 변경하고 Mozila는 메서드를 호출함으로써 이벤트를 흘려보낸다.


var reg_exp = /[0-9]/;

if(String.fromCharCode(keyValue).match(reg_exp) == null){
   if(window.event){
       window.event.returnValue = false;
   }else{
       e.preventDefault();
   }
}

위 코드를 조금 바꿔보았다.
아스키값으로 비교하는 대신에 정규식을 사용하였다.
훨씬 깔끔(?)해 보이나??

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

[CSS] onMouseOver,onMouseOut은 그만!!  (17) 2007.01.03
이벤트 Fake!!!  (0) 2006.12.12
테이블(Table) 그리기  (0) 2006.11.30
CSS Box Model  (0) 2006.11.30
Ajax + Drag&Drop 활용 사이트  (0) 2006.11.10
posted by 초딩입맛제주아재
prev 1 next