我已经为 snippets 创建了示例来自 Polymer 3 开发指南。此示例无法编译，因为 _myLocationListener 未定义并且在构造函数中使用。监听器也没有在开发指南片段中定义。
如何初始化 this._myLocationListener 属性。
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
/**
* @customElement
* @polymer
*/
class XcustomElementEventHandlingApp extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
border: dotted;
background: aliceblue;
}
</style>
<h2>Hello [[prop1]]!</h2>
<button on-click="handleClick">Kick Me</button>
<div id="child-el-01">Please, check the logs in Console (dev tools).</div>
`;
}
static get properties() {
return {
prop1: {
type: String,
value: 'xcustom-element-event-handling-app'
}
};
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
ready() {
super.ready();
this.addEventListener('click', this._onClick);
const childElement = this.shadowRoot.getElementById('child-el-01');
childElement.addEventListener('click', this._onClick.bind(this));
childElement.addEventListener('mouseover', event => this._onHover(event));
console.log('(this, the) custom element added to DOM.');
}
handleClick() {
console.log('Ow!');
}
_onClick(event) {
this._makeCoffee();
}
_makeCoffee() {
console.log('in _makeCoffee()')
}
_onHover(event) {
console.log('_onHover(ev) called');
console.log(JSON.stringify(event));
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('hashchange', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('hashchange', this._boundListener);
}
}
window.customElements.define('xcustom-element-event-handling-app', XcustomElementEventHandlingApp);
package.json:
{
"name": "xcustom-element-event-handling",
"description": "event handling demo. From dev guide.",
"dependencies": {
"@polymer/polymer": "^3.0.0"
},
"devDependencies": {
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.0"
}
}
抛出以下异常:
Uncaught TypeError: this._myLocationListener.bind is not a function
at new XcustomElementEventHandlingApp (xcustom-element-event-handling-app.js:36)
最佳答案
在上面的示例中，主要思想是您是否想从该自定义元素外部监听事件。您可以在connectedCallback中设置一个监听器，并使用disconnectedCallback将其删除，然后在事件发生后在元素中分配一个函数。
类似的东西
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="x-custom.js"></script>
</head>
<body>
<button>This button not in the element</button>
<x-custom></x-custom>
</body>
</html>
x-custom.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7606191a0f1b13043645584658465b060413584744" rel="noreferrer noopener nofollow">[email protected]</a>/polymer-element.js';
class XCustom extends PolymerElement {
static get template() {
return html`<h2>Hello </h2> `;
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('click', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('click', this._boundListener);
}
_myLocationListener(){
alert('This click comes from index.html - out of this element')
}
}
window.customElements.define('x-custom', XCustom);
关于javascript - Polymer 3 devguide "Listener on outside elements"中的事件示例引发异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53334284/