Element View

It's view layer to HTMLElement, that responsible for Event Handling.

Example of use

Form block:

<form id="form" class="form">
    <input class="form__text">
    <select class="form__choice"></select>
</form>

View class:

class FormView extends ElementView {
    get events() {
        return {
            mouseenter: this._onMouseEnter,
            '.form__text': {
                input: this._onInputText
            },
            '.form__choice': {
                change: this._onChangeChoice
            }
        };
    }

    _onMouseEnter(event) {
        // ...
    }

    _onInputText(event) {
        // ...
    }

    _onChangeChoice(event) {
        // ...
    }
}

Initiate view:

new FormView(document.querySelector('#form'));

Web Component example

Template:

<dom-module id="custom-form">
    <template>
        <form id="form" class="form">
            <input class="form__text">
            <select class="form__choice"></select>
        </form>
    </template>
    <script src="custom-form.js"></script>
</dom-module>

Custom element:

class CustomFormElement extends ElementViewMixin(Polymer.Element) {
    static get is() {
        return 'custom-form';
    }

    get events() {
        return {
            '.form__text': {
                input: this._onInputText
            },
            '.form__choice': {
                change: this._onChangeChoice
            }
        };
    }

    _onInputText(event) {
        // ...
    }

    _onChangeChoice(event) {
        // ...
    }
}

window.customElements.define(CustomFormElement.is, CustomFormElement);

Element usage:

<custom-form></custom-form>

Creating and triggering events

It's native feature. See MDN guide.