anchor.diff:  
   .l-sub-section
     :marked
  +    또는, `event.target.value`를 `event.key`로 변경하여
  +    개별 키를 누적할 수도 있습니다.
  +    이 경우 사용자가 동일하게 입력하면 다음과 같이 생성됩니다:
  +
       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().
  
positive.code:     While the statement does nothing useful, 
      it satisfies Angular's requirement so that Angular will update the screen.
  :marked
    It's easier to get to the input box with the template reference
    variable than to go through the `$event` object. Here's a rewrite of the previous
    `keyup` example that uses a template reference variable to get the user's input.
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-2' ,'app/keyup.components.ts (v2)')(format=".")
  :marked
    A nice aspect of this approach is that the component gets clean data values from the view.
    It no longer requires knowledge of the `$event` and its structure.
  
  <a id="key-event"></a>
  .l-main-section
  :marked
    ## Key event filtering (with `key.enter`)
    The `(keyup)` event handler hears *every keystroke*.
    Sometimes only the _Enter_ key matters, because it signals that the user has finished typing.
    One way to reduce the noise would be to examine every `$event.keyCode` and take action only when the key is _Enter_.
    
    There's an easier way: bind to Angular's `keyup.enter` pseudo-event. 
    Then Angular calls the event handler only when the user presses _Enter_.
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-3' ,'app/keyup.components.ts (v3)')(format=".")
  
  :marked
    Here's how it works.
  figure.image-display
      img(src='/resources/images/devguide/user-input/keyup3-anim.gif' alt="key up 3")
  
  .l-main-section
  :marked
    ## On blur
  
    In the previous example, the current state of the input box
    is lost if the user mouses away and clicks elsewhere on the page
    without first pressing _Enter_.
    The component's `value` property is updated only when the user presses _Enter_.
  
    To fix this issue, listen to both the _Enter_ key and the _blur_ event.
  
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-4' ,'app/keyup.components.ts (v4)')(format=".")
  
  .l-main-section
  :marked
    ## Put it all together
    The previous page showed how to [display data](./displaying-data.html).
    This page demonstrated event binding techniques.
  
    Now, put it all together in a micro-app
    that can display a list of heroes and add new heroes to the list.
  
negative.code:     img(src='/resources/images/devguide/user-input/keyup-loop-back-anim.gif' alt="loop back")
  .l-sub-section
    :marked
      **이벤트에 바인딩되지 않는 한 전혀 동작하지 않을 것입니다**.
  
      **This won't work at all unless you bind to an event**.
  
      Angular는 오직 앱이 키 입력과 같은 비동기 이벤트에 응답하여 
      무엇인가를 수행하는 경우에만 바인딩(그 다음 화면)을 업데이트 합니다.
      이 예제 코드는 `keyup` 이벤트를 가장 짧은 템플릿 구문인
      숫자 0에 바인딩했습니다.
      이 구문은 아무런 일도 하지 않지만,
      Angular의 요구사항을 만족시키므로 Angular가 화면을 업데이트 할 것입니다.
  
      Angular updates the bindings (and therefore the screen)
      only if the app does something in response to asynchronous events, such as keystrokes.
  