..

Search

20) 이벤트의 개념

이벤트의 개념


이벤트(event)란?

오늘날 웹 페이지는 사용자와 수많은 상호작용을 하게 됩니다.

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

 

위에서 예를 든 사용자의 동작들이 모두 이벤트(event)를 발생시킵니다.

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


이벤트 핸들러(event handler)

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

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 합니다.

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

 

다음 예제는 이벤트 핸들러를 작성하여 연결한 예제입니다.

예제

$(function() {

    $("button").on({             // 모든 <button>요소에

        mouseenter: function() { // mouseenter 이벤트를 설정함.

            $("#text").append("마우스가 버튼 위로 진입했어요!<br>");

        },

        click: function() {      // click 이벤트를 설정함.

            $("#text").append("마우스가 버튼을 클릭했어요!<br>");

        },

        mouseleave: function() { // mouseleave 이벤트를 설정함.

            $("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");

        }

    });

});

코딩연습 ▶


이벤트 객체(event object)

이벤트 핸들러 함수는 이벤트 객체(event object)를 인수로 전달받을 수 있습니다.

이렇게 전달받은 이벤트 객체를 이용하여 이벤트의 성질을 결정하거나, 이벤트의 기본 동작을 막을 수도 있습니다.

제이쿼리의 이벤트 객체는 W3C 표준 권고안을 따르는 이벤트 객체를 정규화한 것입니다.


연습문제