지금까지는 사용자의 입력을 전혀 받지 않은 채 프로그램을 실행했습니다.
사용자가 원을 클릭할 수도 있지만, 아무 반응도 나타나지 않습니다.
마찬가지로, 원을 드래그해봐도 아무 일도 일어나지 않습니다.
원을 어디에 그릴지 사용자가 선택할 수 있게 해서 프로그램을 좀 더 대화형으로 바꿔봅시다.

사용자 입력은 항상 비동기적이라는 사실에 익숙해져야 합니다.
비동기적 이벤트란 이벤트가 언제 일어날지 프로그래머가 전혀 알 수 없는 이벤트를 말합니다.
사용자의 마우스 클릭도 비동기적 이벤트의 일종입니다.
사용자의 마음에 들어가지 않는 한 언제 클릭할지는 알 수 없습니다.
사용자가 클릭하면 거기에 반응하는 건 물론 가능하지만, 언제 클릭할지, 클릭을 할지 말지는 사용자 마음대로입니다.
**사용자의 입력에 따라 일어나는 비동기적 이벤트는 비교적 직관적이지만,
책의 후반에서는 그다지 직관적이지 않은 비동기적 이벤트에 대해서드 공부하게 될겁니다. **

Paper.js는 툴(tool) 객체를 통해 사용자 입력을 처리합니다.
바둑판 모양으로 원을 그리는 코드를 다음 코드로 교체하십시오.

$(document).ready(function () {
    'use strict';
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));

    var tool = new Tool();

    tool.onMouseDown = function (event) {
        var c = Shape.Circle(event.point.x, event.point.y, 20);
        c.fillColor = 'green';
    }

    paper.view.draw();
})

이 코드의 첫 행에서는 tool 객체를 만들었습니다.
객체를 만들면 거기에 이벤트 핸들러를 연결할 수 있습니다.
여기서는 onMouseDown 이벤트 핸들러를 연결했습니다.
사용자가 마우스를 클릭할 때마다 이 핸들러에 연결한 함수가 호출됩니다.
이 사실을 잘 이해해야 합니다.
앞의 예제에서는 코드가 즉시 실행됐습니다.
브라우저를 새로고침 하면 자동으로 녹색 원이 나타났습니다.
여기서는 그렇게 하지 않습니다.
그렇게 했다면 녹색 원 하나가 화면 어딘가에 나타났을 겁니다.
대신, 사용자가 캔버스 어딘가를 마우스로 클릭해야만 function 다음에 있는 중괄호 사이의 코드가 실행됩니다.

이벤트 핸들러는 두 가지 일을 합니다.

• 첫 번째는 마우스를 클릭할 때 코드를 실행하는 것이고,
• 두 번째는 어디를 클릭했는지 보고하는 겁니다.

마우스로 클릭한 위치는 매개변수 event.point 프로퍼티에 저장됩니다.
event.point의 x와 y 프로퍼티가 마우스로 클릭한 위치의 좌표입니다.

x와 y 좌표를 각각 지정하지 않고 클릭한 위치를 바로 넘기면 좀 더 짧게 쓸 수 있습니다.

var c = Shape.Circle(event.point, 20);

이 코드는 자바스크립트에서 매우 중요한 측면을 잘 나타냅니다.
자바스크립트는 넘겨받은 매개변수를 바탕으로 추론하는 능력이 있습니다.
이전에 쓴 코드처럼 숫자 세 개를 연달아 넘기면 그 숫자들은 각각 x와 y 좌표, 반지름입니다.
여기서처럼 매개변수 두 개를 넘기면 처음 것은 위치 객체이고, 두 번째 것은 반지름입니다.
여기에 대해서는 6장과 9장에서 더 자세히 알아보겠습니다.