Javascript 이벤트 코드 분리

 

자바스크립트에서 버튼 등의 이벤트 처리할때 이벤트 주체와 이벤트 코드를 분리하는 방법이다.

 

1. 일반적인 방식.

<script type="text/javascript">
    function test() {
        alert('call~');
    }
</script>
<input type="button" value="클릭" onclick="test()">

 

위와 같이 버튼내에서 이벤트 처리하는 함수를 호출하고 있다.

이런 방식은 직관적이긴 하지만, 해당 이벤트를 추가/제거할려고 하면 코드를 일일이 찾아가면서

추가/제거를 해야한다 하지만 아래와 같은 유형에서는 손쉽게 이벤트를 부여 할수가있다.

 

2. 방법 #1

 <script for=~ event=~>...</script>

 동일한 코드를 아래와 같은 형태로 구현하면 된다.

<script type="text/javascript">
    function test() {
        alert('call~');
    }

</script>

<input id="btn" type="button" value="클릭">

<script for=btn event="onclick()">
 test();
</script>

 

3. 방법 #2

<script type="text/javascript">
    function test() {
        alert('call~');
    }

</script>

<input id="btn" type="button" value="클릭">

<script>
 document.getElementById("btn").onclick = test;
</script>

 

 

위의 3가지 코드는 동일한 결과를 나타낸다.

ajax책이나 이런곳을 보면 방법 #2를 많이 사용하는것을 볼수있다.

 

취향에 따라 GET!