Fatal编程技术网
  • javascript/
  • Javascript 《聚合物3开发指南》中的事件示例；“外部元素上的侦听器”；抛出异常

Javascript 《聚合物3开发指南》中的事件示例；“外部元素上的侦听器”；抛出异常

javascript

Javascript 《聚合物3开发指南》中的事件示例；“外部元素上的侦听器”；抛出异常,javascript,web-component,polymer-3.x,Javascript,Web Component,Polymer 3.x,我已经根据Polymer 3开发指南创建了示例。此示例不编译，因为未定义myLocationListener，并且它在构造函数中使用。侦听器也没有在开发指南代码段中定义 如何初始化此属性。\u myLocationListener属性 import {html, PolymerElement} from '@polymer/polymer/polymer-element.js'; /** * @customElement * @polymer */ class XcustomElemen

我已经根据Polymer 3开发指南创建了示例。此示例不编译，因为未定义myLocationListener，并且它在构造函数中使用。侦听器也没有在开发指南代码段中定义

如何初始化此属性。\u 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);
引发以下异常：

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/polymer@3.0.0-pre.12/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);

import{polymerement，html}from'https://unpkg.com/@聚合物/polymer@3.0.0-pre.12/polymer element.js'；
类XCustom扩展了聚合关系{
静态获取模板（）{
返回html`Hello`；
}
构造函数（）{
超级（）；
this.\u boundListener=this.\u myLocationListener.bind（this）；
}
connectedCallback（）{
super.connectedCallback（）；
window.addEventListener（'click'，this.\u boundListener）；
}
disconnectedCallback（）{
super.disconnectedCallback（）；
window.removeEventListener（'单击'，此。\ u boundListener）；
}
_myLocationListener（）{
警报（'此单击来自index.html-此元素之外'）
}
}
window.customElements.define（'x-custom'，XCustom）；

为了改进Polymer 3文档中HakanC的解决方案，我在不重写任何回调的情况下，成功地结合了每个方法的思想，并成功地提出了以下方法，该方法在类定义中，并在外部调用；类似于JAVA中的接口

  public setOnClickListener(method): void {
    const self = this;
    $(self).on('click', method.bind(self);
    //  or self.addEventListener('click', method.bind(self)); if you use typescript
  }
对我来说很简单…：）

希望最新的编辑确实改进了这个问题。我刚开始学习Polymer 3，正在尝试运行开发指南示例。请在问题正文中添加具体的代码示例和错误谢谢！示例代码和代码片段链接添加到问题正文中。非常感谢！此外，我们可以向按钮添加一个id，以便只侦听按钮单击：window.document.getElementById（'xyz1'）。addEventListener（'click'，this.\u boundListener）； 
  public setOnClickListener(method): void {
    const self = this;
    $(self).on('click', method.bind(self);
    //  or self.addEventListener('click', method.bind(self)); if you use typescript
  }