本文深入解析Polymer框架中Shadow DOM的事件绑定机制。通过对比listeners属性、on-*前缀属性以及动态监听方法（如listen和addEventListener），探讨框架如何将事件处理函数定义在ViewModel层，以实现视图与逻辑的隔离。文章提供了具体代码示例，展示如何在Polymer组件中正确绑定和处理DOM事件，帮助开发者理解框架的设计意图并掌握实际开发中的最佳实践。
Polymer事件绑定概述与VM层隔离
作为一个完整的前端框架，Polymer必然提供了完善的事件绑定支持。虽然在前文的示例中已间接使用过相关功能，但尚未进行系统性的单独介绍。Polymer的设计哲学倾向于将事件处理函数明确命名并定义在ViewModel（VM）层，这种做法旨在有意地将VM层独立隔离出来，以增强代码的结构清晰度。以下示例展示了如何为按钮及其所在的Shadow DOM Host同时绑定事件：当点击按钮时，两个绑定的事件处理函数均会被触发。
<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>
静态绑定方式：listeners与on-*属性
在Polymer中，`listeners`对象用于为当前Shadow DOM Host添加事件监听（尽管其实际效用可能有限）。此外，直接在DOM元素上使用`on-*`前缀的属性也可以为特定元素绑定事件。通过这两种方式绑定的均为原生DOM事件，触发时传递的参数即为原生的事件对象。除了上述作为属性直接设置的事件绑定方式外，Polymer还支持动态绑定事件的机制。
<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`方法在绑定元素时，接收的不是直接的处理函数，而是处理函数的名称字符串。这种设计可能是为了将ViewModel（VM）与Model（M）完全隔离，但作者对此持保留态度。值得注意的是，Shadow DOM Host本身是一个原生对象，因此直接使用原生的`addEventListener`方法也是可行的。然而，既然框架提供了内置支持，通常不建议直接编写原生代码。这或许是作者尚未完全领悟Polymer设计背后的深层考量。