anchor.diff:  include ../_util-fns
   
   :marked
  +  링크를 클릭하고, 버튼을 누르고, 텍스트를 입력하는 것과 같은 
  +  사용자 액션은 DOM 이벤트를 발생시킵니다.
  +  이 페이지에서는 이러한 이벤트를 Angular 이벤트 바인딩 구문을 사용해
  +  컴포넌트 이벤트 핸들러에 어떻게 바인딩하는지 설명합니다.
  +
     User actions such as clicking a link, pushing a button, and entering
     text raise DOM events.
     This page explains how to bind those events to component event handlers using the Angular
     event binding syntax.
   
  +  <live-example></live-example>을 실행해 보세요.
  +
     Run the <live-example></live-example>.
   
   :marked
  +  ## 사용자 입력 이벤트 바인딩
     ## Binding to user input events
  +
  +  어떠한 [DOM 이벤트](https://developer.mozilla.org/en-US/docs/Web/Events)에라도
  +  [Angular 이벤트 바인딩](./template-syntax.html#event-binding)을 사용할 수 있습니다.
  +  많은 DOM 이벤트는 사용자 입력에 의해 발생합니다. 이런 이벤트를 바인딩하는 것은
  +  사용자로부터 입력을 받는 방법을 제공합니다.
   
     You can use [Angular event bindings](./template-syntax.html#event-binding)
     to respond to any [DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
     Many DOM events are triggered by user input. Binding to these events provides a way to
     get input from the user.
   
  +  DOM 이벤트에 바인드하려면 DOM 이벤트 이름을 괄호로 묶고, 따옴표 붙은
  +  [템플릿 구문](./template-syntax.html#template-statements)을 할당하면 됩니다.
  +
     To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted
     [template statement](./template-syntax.html#template-statements) to it.
   
  +  다음 예제는 클릭 핸들러를 구현하는 이벤트 바인딩을 보여줍니다:
  +
     The following example shows an event binding that implements a click handler:
   +makeExample('user-input/ts/app/click-me.component.ts', 'click-me-button')(format=".", language="html")
   
   <a id="click"></a>
   :marked
  +  등호 왼쪽의 `(click)`은 버튼의 클릭 이벤트를 **바인딩 대상**으로 식별하게 합니다.
  +  등호 오른쪽에 따롬표로 묶인 텍스트는 **템플릿 구문**으로
  +  컴포넌트의 `onClickMe` 메소드를 호출하여
  +  클릭 이벤트에 반응합니다.
  +
     The `(click)` to the left of the equals sign identifies the button's click event as the **target of the binding**.
     The text in quotes to the right of the equals sign
     is the **template statement**, which responds
     to the click event by calling the component's `onClickMe` method.
   
  +  바인딩을 작성할 때는, 템플릿 구문의 **실행 컨텍스트**를 알고 있어야 합니다.
  +  템플릿 구문의 식별자는 특정 컨텍스트 객체에 속하며,
  +  일반적으로 템플릿을 제어하는 Angular 컴포넌트입니다.
  +  위의 예는 한줄의 HTML을 보여주지만, HTML은 더 큰 컴포넌트에 속해 있습니다.
  +
     When writing a binding, be aware of a template statement's **execution context**.
     The identifiers in a template statement belong to a specific context object,
     usually the Angular component controlling the template.
  
positive.code: 
  .l-sub-section
    :marked
      Alternatively, you could accumulate the individual keys themselves by substituting `event.key`
      for `event.target.value` in which case the same user input would produce:
    code-example().
  
negative.code: 
  +makeExample('user-input/ts/app/click-me.component.ts', 'click-me-component', 'app/click-me.component.ts')(format=".")
  :marked
    사용자가 버튼을 클릭하면, Angular는 `ClickMeComponent`에서 `onClickMe` 메소드를 호출합니다.
  
    When the user clicks the button, Angular calls the `onClickMe` method from `ClickMeComponent`.
  
  .l-main-section
  :marked
    ## $event 객체로부터 사용자 입력 받기
    ## Get user input from the $event object
  
    DOM 이벤트는 컴포넌트에 유용한 많은 양의 정보를 전달합니다.
    이번 섹션은 사용자의 키 입력을 얻기 위해
    `keyup` 이벤트를 어떻게 바인딩 하는지 보여줍니다.  
  
    DOM events carry a payload of information that may be useful to the component.
    This section shows how to bind to the `keyup` event of an input box to get the user's input after each keystroke.
  
    다음 코드는 `keyup` 이벤트를 받으면 전체 이벤트 페이로드(`$event`)를
    컴포넌트의 이벤트 핸들러로 전달합니다.
  
    The following code listens to the `keyup` event and passes the entire event payload (`$event`) to the component event handler.
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-template', 'app/keyup.components.ts (template v.1)')(format=".")
  :marked
    사용자가 키를 눌렀다 놓으면 `keyup` 이벤트가 발생하고,
    Angular는 `$event` 변수에 해당 DOM 이벤트 객체를 제공하여
    컴포넌트의 `onKey()` 메소드에 파라미터로 전달합니다.
  
    When a user presses and releases a key, the `keyup` event occurs, and Angular provides a corresponding
    DOM event object in the `$event` variable which this code passes as a parameter to the component's `onKey()` method.
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-class-no-type', 'app/keyup.components.ts (class v.1)')(format=".")
  :marked
    `$event` 객체의 속성은 DOM 이벤트의 유형에 따라 다릅니다.
    예를들어, 마우스 이벤트는 입력 상자 편집 이벤트와 다른 정보를 포함합니다.
  
    The properties of an `$event` object vary depending on the type of DOM event. For example,
    a mouse event includes different information than a input box editing event.
    
    모든 [표준 DOM 이벤트 객체](https://developer.mozilla.org/en-US/docs/Web/API/Event)는
    이벤트를 발생시킨 요소에 대한 참조인 `target` 프로퍼티를 가집니다.
    이번 예제의 경우, `target`은 [`<input>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)
    를 참조하고 `event.target.value`는 그 엘리먼트의 현재 내용을 반환합니다.
  
    All [standard DOM event objects](https://developer.mozilla.org/en-US/docs/Web/API/Event)
    have a `target` property, a reference to the element that raised the event.
    In this case, `target` refers to the [`<input>` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) and
    `event.target.value` returns the current contents of that element.
  
    각각의 호출 뒤에, `onKey()` 메소드는 입력 상자 값의 내용을
    컴포넌트 `values` 리스트 프로퍼티에 추가하고,
    그 뒤에 분리 문자(|)를 붙입니다.
    [보간(interpolation)](./template-syntax.html#interpolation)으로
    `values` 프로퍼티로부터 입력 상자의 변경사항을 누적시켜 표시합니다.
  
    After each call, the `onKey()` method appends the contents of the input box value to the list
    in the component's `values` property, followed by a  separator character (|).
    The [interpolation](./template-syntax.html#interpolation)
    displays the accumulating input box changes from the `values` property. 
  
    사용자가 "abc"를 입력 한 다음, 백스페이스로 하나씩 제거한다고 가정합시다.
    이때 UI에 표시되는 내용은 다음과 같습니다:
  
    Suppose the user enters the letters "abc", and then backspaces to remove them one by one.
    Here's what the UI displays:
  