자바스크립트 학습 게시판입니다.
글 등록하기 | 내글 관리하기 | 연재글 | 보관함
onMouseout과 setTimeout 사용법
첨부파일 https://eond.com/javascript/361483

어려운 작업을 하시는군요. 쉬울 것 같지만 그리 쉽지 않습니다.

setTimeout 함수의 첫번째 인수에 this 객체를 인수로 받는 함수를 지정할 수 없거든요.

문자열로 setTimeout('namosw_cell_rollout(this)', 1000) 이렇게 주게되면

1초 후에 실행 시 this는 실행 전의 this가 아니게 되어버립니다.

 

1. 쉬운 방법은 숫자나 문자를 인수로 받는 함수를 작성하는 것입니다.

setTimeout('namosw_cell_rollout(99)', 1000);

setTimeout('namosw_cell_rollout("submenu01")', 1000);

이런 식이죠.

 

2. 한가지 방법이 더 있습니다. this를 사용할 수도 있는 방법입니다.

setTimeout(function (this) { do(this) }, 1000);

이와 같이 익명의 함수를 지정하는 방법입니다.

하지만 이 방법은 메모리가 해제되지 못하는 코드로 메모리가 낭비되는 코드이므로 사용에 주의가 필요합니다.

 

3. 나머지 방법 중 고급에 속하는 방법은 객체를 만들고 객체를 call 이나 apply 함수로 호출하는 코드를 작성할 수도 있습니다. 하지만 이 방법은 이와 같은 간단한 작업에 어울리지 않습니다. 주로 요즘 유행하는 여러 라이브러리에서 사용되는 방법입니다.

 

가장 쉬운 1번으로 예를 들어보일게요.

 

다음은 메뉴를 구성하는 HTML입니다.

질문자님의 코드와 비슷하지만 각 메뉴에 id 속성이 지정되어 있고,

이벤트에서 이 id와 연관된 숫자를 인수로 호출하는 것을 눈여겨 봐주세요.

 

  <table border="1">
  <tr>
   <td id="m1" onmouseover="showMenu(1)" onmouseout="hideMenu(1)">Menu 01</td>
   <td id="m2" onmouseover="showMenu(2)" onmouseout="hideMenu(2)">Menu 02</td>
   <td id="m3" onmouseover="showMenu(3)" onmouseout="hideMenu(3)">Menu 03</td>
  </tr>
 </table>

 <table border="1" id="s1" style="display:none"><tr><td>Submenu 01</td></tr></table>
 <table border="1" id="s2" style="display:none"><tr><td>Submenu 01</td></tr></table>
 <table border="1" id="s3" style="display:none"><tr><td>Submenu 01</td></tr></table>

 

다음은 스타일시트입니다.

예를 들기위해 이미지가 아닌 배경색을 사용했습니다. 

 

 <style type="text/css">
  .showMenu { font-weight: bold; background-color: #ef3; }
 </style>

 

다음은 스크립트.

setTimeout('doHideMenu(' + idx + ')', 1000); 와 같이 인수로 전달받은 idx로 하나의 문자열을 만들어 호출하는 것을 눈여겨 봐주세요.

 

  <script type="text/javascript">
  function showMenu(idx) {
   document.getElementById('m' + idx).className = 'showMenu';
   document.getElementById('s' + idx).style.display = 'block';
  }

  function hideMenu(idx) {
   setTimeout('doHideMenu(' + idx + ')', 1000);
  }

  function doHideMenu(idx) {
   document.getElementById('m' + idx).className = '';
   document.getElementById('s' + idx).style.display = 'none';
  }
 </script>

 

 

질문자님의 의도대로 작동하나요?

혹시 이상하다면 추가 의견에 남겨주시면 확인하는대로 추가답변 드릴게요~

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 79 articles in 3 / 4 pages
번호 제목 제목 글쓴이 글쓴이 날짜날짜 조회 수
공지 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) 파일 이온디 2015/08/27 473
공지 자바스크립트 추천 사이트 [1] 이온디 2015/08/06 355
38 [라이브러리] 데이터를 처리할 때 유용한 6가지 자바스크립트 라이브러리(Sharon Machlis | Computerworld, 2013) 이온디 2015/08/28 97
37 [고급팁] ‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 (Jonathan Freeman | InfoWorld, 2013) 이온디 2015/08/28 90
현재글 [문제] onMouseout과 setTimeout 사용법 이온디 2015/08/28 101
35 [고급팁] 자바스크립트 this 이온디 2015/08/26 222
34 [고급팁] 자바스크립트 클로져(Closures) 심화 파일 이온디 2015/08/26 105
33 [기초] [javascript] for문을 사용한 sum 출력하기 / 싱싱해 서기의 javascript 기초 강좌 #1~7 이온디 2015/08/28 191
32 [포럼] 자바스크립트의 기본적인 특성(러닝은빛) 이온디 2015/08/27 93
31 [팁] 홈페이지에 접속해서 지난 시간 나타내기 이온디 2015/08/27 31
30 [포럼] 자바스크립트 개발을 하기 전에 꼭 한번 읽어 보세요. 이온디 2015/08/27 145
29 [팁] 자바스크립트 디버깅 console.log 이온디 2015/08/26 121
28 [팁] 자바스크립트 지역변수, 전역변수의 유효범위 (중요) 이온디 2015/08/26 273
27 [팁] 자바스크립트(JavaScript) 배열(array) sort, splice, push 정렬,추가,수정,삭제 이온디 2015/08/26 827
26 [팁] 자바스크립트 함수 function() 이온디 2015/08/26 63
25 [팁] Function Declarations(함수선언) vs Function Expressions(함수표현) (함수호이스팅 hoisting) 이온디 2015/08/26 86
24 [팁] JavaScript에서 class 정의하기 이온디 2015/08/25 74
23 [팁] 자바스크립트의 모든것 이온디 2015/08/25 561
22 [포럼] 자바스크립트 개념 이온디 2015/08/25 607
21 [포럼] 객체 지향 자바스크립트 이온디 2015/08/25 56
20 [포럼] 자바스크립트 #1 객체지향 흉내내기 이온디 2015/08/25 46

해시태그 디렉터리