The Heungsub — jquery.holdevent.js

Text Post

jquery.holdevent.js

프론트엔드를 개발하다보면 JavaScript 이벤트를 쓸 일이 많습니다. 이때 HTML 엘리멘트에 JavaScript 함수를 이벤트핸들러로 지정하는 방법은 여러가지가 있죠. 그 중 대표적인 두 가지는 다음과 같습니다.

함수를 먼저 정의하고, onclick 같은 이벤트 속성으로 스크립트를 지정합니다.

 <script>
   function fn( elem ) {
     alert( $( "p" ).text() );
     return false;
   }
 </script>
 <a href="http://example.net/" onclick="return fn( this );">example</a>
 <p>Hello, world!</p>

이벤트 속성이 없는 순수한 엘리멘트를 먼저 정의하고, 나중에 스크립트로 핸들러를 지정합니다.

 <a href="http://example.net/">example</a>
 <p>Hello, world!</p>
 <script>
   function fn( elem ) {
     alert( $( "p" ).text() );
     return false;
   }
   $( "a" ).click(function() { return fn( this ); });
 </script>

HTML 문서와 JavaScript 코드를 분리하여 양쪽을 순수하게 유지시킬 수 있기 때문에 전 두번째 방법을 선호했습니다.

그런데 문제가 있더랍니다. 함수들을 페이지 로드가 끝났을 때(domready) 정의하도록 하다보니 페이지 로딩 중에는 원하는대로 이벤트를 일으킬 수 없었습니다. 그렇다고 첫번째 방법을 사용하면 이벤트 함수 내에서 아직 로드되지 않은 DOM을 건드려 에러를 일으키는 경우가 있을 수 있습니다.

그래서 jquery.holdevent.js를 만들었습니다. 이것을 사용하면, 페이지 로드가 끝나기 전의 이벤트를 모두 붙잡아둘 수 있습니다. 페이지 로딩 중의 이벤트는 모두 큐에 담고 로드가 끝나는 시점에 담겨진 이벤트를 모두 실행합니다.

<a
  href="http://example.net/"
  onclick="return _click_( this ) && fn( this );"
>example</a>
<p>Hello, world!</p>
<script>
  function fn( elem ) {
    alert( $( "p" ).text() );
    return false;
  }
</script>

_click_, _submit_, _focus_ 등 각 이벤트에 대응하는 함수를 사용해 이벤트를 붙잡습니다.