[Jquery] event - 이벤트 핸들러

    

 

이벤트(event)

웹 페이지는 사용자와 정말 많은 상호작용(소통)을 하게 됩니다.

사용자는 마우스로 요소를 클릭하거나, 움직이거나, 글을 쓰는 등 수많은 종류의 동작을 수행합니다.

 

위에서 예를 든 사용자 동작들이 모두 이벤트를 발생시키는 것입니다.

즉, 이벤트가 발생했다는 것은 웹 페이지에서 동작이 발생하여, 웹 페이지가 그 사실을 알려주는 것을 의미합니다.

 

---

이벤트 핸들러(event handler)

웹 페이지에서는 수많은 이벤트가 쉬지 않고 계속해서 발생합니다.

이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결하고 처리해야 합니다.

이벤트 핸들러가 연결된 특정 요소에서 지정한 타입의 이벤트가 발생하면, 웹 페이지는 연결된 이벤트 핸들러를 실행합니다.

 

아래 예제를 통하여 자세히 살펴보도록 하겠습니다.

<script>
    $(function() {
        $("button").on({
            mouseenter: function() {
                $("#text").append("마우스가 버튼 위에 있습니다~<br>");
            },
            click: function() {
                $("#text").append("마우스가 버튼을 클릭했어요<br>");
            },
            mouseleave: function() {
                $("#text").append("마우스가 버튼 위에서 빠져나갔어요~<br>");
            }
        })
    })
</script>

 

출력 결과

 

button에 마우스를 위치하는 것                  : mouseenter

button을 마우스로 클릭하는 것                  : click

button에 마우스를 위치하다 나가는 것     : mouseleave    

 

append() 메소드는 뒤에 추가하는 메소드입니다. 

즉, id가 'text'인 태그에 문자열을 추가하는 것이죠.