Working with DOM Events
You can attach HTML event handlers to VDL and HTML tags using the <vdl-event> element.
This is useful when you are building a user interface that needs to react to events other than those the core components provide.
A typical view can raise and respond to many events. Many are listed on the following page of the Mozilla documentation web site: https://developer.mozilla.org/en-US/docs/Web/Events.
You can intercept DOM events by providing the
<vdl-event> element with one or more key-value pairs. Each pair is separated by a colon, the key is the event name and the value is a function reference. In the example, below, the
keyup handler is assigned to the
txtChange function.
<script>
function txtChange(event) { console.log('keyUp fired'); }
</script>
<input id="txtbox" type="text" vdl-event="keyup:txtChange"> When several handlers need to be assigned to the same element, each key-value pair is separated by a comma:
<vdl-field entity="MyScalar"
vdl-event="click: fieldClick, blur:fieldBlur">
</vdl-field> Here, the click handler is assigned to a function
fieldClick and blur to a function called
fieldBlur.
In general, when using event handlers in this way, the form of the call is:
function eventHandler( element, event ) { … } Above,
element is the element object from the DOM that the handler was placed upon, and
event is a jQuery event object.