Da es sich um ein vollständiges Front-End-Framework handelt, muss es Unterstützung im Zusammenhang mit der Ereignisbindung bieten. Tatsächlich wurde in früheren Beispielen die Ereignisbindung verwendet, sie wurde jedoch nicht systematisch eingeführt. Die Ereignisidee von Polymer besteht darin, die Ereignisverarbeitungsfunktionen so weit wie möglich zu benennen und sie auf der VM zu definieren. Ich denke, dieser Ansatz besteht darin, die VM-Schicht absichtlich zu isolieren.
Das folgende Beispiel bindet ein Ereignis sowohl an die Schaltfläche als auch an den Shadow-DOM-Host, auf dem es sich befindet. Wenn auf die Schaltfläche geklickt wird, werden beide Ereignisse ausgelöst.
Führen Sie
aus
<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>
Listener werden verwendet, um Ereignisse zum aktuellen Shadow DOM Host hinzuzufügen (obwohl ich denke, dass es nutzlos ist). On-*-Attribute direkt auf DOM-Elementen können auch Ereignisse an ein Element binden. Diese Methoden sind an DOM-Ereignisse gebunden und das beim Auslösen des Ereignisses übergebene Objekt ist das native Ereignisobjekt.
Zusätzlich zu den oben genannten Ereignisbindungsmethoden, die direkt als Eigenschaften festgelegt werden, können wir Ereignisse auch dynamisch binden.
Führen Sie
aus
<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 möchte immer, dass wir Ereignisverarbeitungsfunktionen benennen. Beispielsweise bindet seine integrierte Listen-Methode nicht eine Ereignisverarbeitungsfunktion an ein Element, sondern den Namen einer Ereignisverarbeitungsfunktion. Vielleicht besteht der Zweck darin, VM und M vollständig zu isolieren, aber das gefällt mir nicht. Allerdings ist Shadow DOM Host selbst auch ein natives Objekt, sodass es auch möglich ist, den nativen addEventListener direkt zu verwenden. Da er jedoch im Framework bereitgestellt wird, empfehle ich nicht, native Objekte zu schreiben. Vielleicht ist mein Denken zu niedrig und ich kann die guten Absichten des Polymer-Designs nicht verstehen?
