JavaScript의 Polymer 프레임워크에서의 이벤트 바인딩에 대한 간략한 토론_기본 지식

완전한 프런트엔드 프레임워크이므로 이벤트 바인딩과 관련된 지원을 제공해야 합니다. 실제로 이전 예제에서는 이벤트 바인딩을 사용했지만 체계적으로 도입되지는 않았습니다. Polymer의 이벤트 아이디어는 이벤트 처리 기능에 가능한 한 많은 이름을 지정하고 이를 VM에서 정의하는 것입니다. 이 접근 방식은 의도적으로 VM 계층을 격리하는 것입니다.
다음 예제에서는 버튼과 해당 버튼이 있는 Shadow DOM 호스트 모두에 이벤트를 바인딩합니다. 두 이벤트가 모두 트리거됩니다.
실행

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button on-click="clickHandler">求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   listeners: {
    'click': 'clickHandler'
   },
   clickHandler: function(e) {
    console.log(e.target);
   } 
  });
 </script>
</dom-module>

<demo-test></demo-test>

리스너는 현재 Shadow DOM 호스트에 이벤트를 추가하는 데 사용됩니다(비록 쓸모없다고 생각하지만). DOM 요소의 On-* 속성은 이벤트를 요소에 바인딩할 수도 있습니다. 이러한 메서드는 DOM 이벤트에 바인딩되며 이벤트가 트리거될 때 전달되는 객체는 기본 이벤트 객체입니다.
속성으로 직접 설정되는 위의 이벤트 바인딩 방법 외에도 이벤트를 동적으로 바인딩할 수도 있습니다.
실행

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button>求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   ready: function() {
    // Polymer 内置
    this.listen(this, 'click', 'clickHandler');
    // 原生
    this.addEventListener('click', this.clickHandler);
   },              
   clickHandler: function(e) {     
    console.log(e);
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

Polymer는 항상 이벤트 처리 함수에 이름을 지정하기를 원합니다. 예를 들어 내장된 Listen 메서드는 이벤트 처리 함수를 요소에 바인딩하는 것이 아니라 이벤트 처리 함수 이름을 바인딩합니다. 아마도 이것의 목적은 VM과 M을 완전히 분리하는 것일 수도 있지만 나는 이것이 마음에 들지 않습니다. 다만, Shadow DOM Host 자체도 네이티브 객체이므로 네이티브 addEventListener를 직접 사용하는 것도 가능하지만, 프레임워크에서 제공되기 때문에 네이티브 객체 작성을 권장하지 않습니다. 내 생각이 너무 낮아서 폴리머 디자인의 좋은 의도를 이해하지 못하는 것은 아닐까?