onClick , onkeydown 마우스클릭 / 엔터 이벤트 처리

와.. 이거 때문에 한참을 헤맸다...

 

[Enter 입력시]

<td width="150">
<input name="query" value="${query}" type="text" 
style="width: 150px; height: 12px" class="textbox" size="12"
onkeydown="javascript:if(event.keyCode==13){searchNew();return false;}">
</td>

위 코드중 onkeydown="~~~" 부분을 추가해주면 된다. event.keyCode 중 13이 Enter 키 입력에 해당된다. 

그러면 query라는 input text box에서 Enter 입력이 발생시 searchNew(); JavaScript 함수로 이동되게 된다. 

 

[마우스 클릭시]

<td width="60">
<span class="button white" >
<input id="submitButton" type="submit"  value="검색" onClick="javascript:searchNew();" /></span>
</td>

마우스 클릭시 onClick 이벤트가 발생하면, JavaScript 함수로 이동한다. 

 

그런데 두개를 설정해두고 JavaScript에서 Event를 넘겨 받을때

처리를 하지 못하여 한참 헤매었다. 

 

function searchNew() {
	var objEv = formQuery.query;
          alert("~~");
          
	document.formQuery.page.value = 0;
	document.formQuery.submit();	
}

function에서 변수에 이벤트를 담기 위해

기존에는 소스에는 var objEv = event.srcElement; 으로 되어있었는데, 

이렇게 이벤트를 받으면 Enter(keyCode13)에 대한 이벤트는 넘겨 받았지만, 

onClick시에는 event.srcElement로 넘겨 받질 못했다. 

 

필자의 경우, 위 코드 처럼

<form name="formQuery"    //  <input name="query"

해당 input box가 있는 form의 name + input box name

이렇게 데이터를 넘기니 script 함수로 이벤트가 넘어갔다. 

 

두가지를 배웠다. 

1. alert("Hello")  얼럿을 호출하면서 JSP step확인을 쉽게 할 수도 있다.

2. 공부를 합시다... ㅠㅠ

 

 

 

 

 

 

 

 

본문 내용이 도움이 되셨다면, 아래의 공감버튼을 눌러주세요. 

정보 공유를 위한 포스팅에 큰 힘이 됩니다. 

만약 틀린 정보가 있으면 댓글 달아주세요. 수정하도록 하겠습니다. 

읽어주셔서 감사합니다. 오늘도 좋은 하루 보내세요.