# Event Handling
We can listen to events on elements and run some scripts when they are triggered.
There are some common events that may be triggered on any essential element:
touchstart
,touchmove
,touchcancel
,touchend
,key
,click
,swipe
, andlongpress
, triggered after the user's interaction with the app;focus
,blur
,appear
,disappear
, andresize
when the element changes its appearance or is selected/unselected;animationstart
,animationiteration
, andanimationend
, triggered during an animation process.
Check all the essential elements and their specific events.
# Event Listeners
We can use the name of the event with the prefix on
, or using the @
symbol to bind a listener method (or handler) with an event.
For instance, the follow example binds the method press()
with the click
event of <div>
elements.
<template>
<div>
<!-- Normal format -->
<div onclick="press"></div>
<!-- Shortcut -->
<div @click="press"></div>
</div>
</template>
<script>
module.exports= {
press: function(e) {
this.title = 'You clicked!!'
}
}
</script>
The event handler includes an argument for the event that is triggered. In the case the method includes other parameters, the event is automatically added to the parameter list.
# Event Handlers with Constant Parameters
Methods to handle events may receive static and dynamic parameters.
This example displays a list of 5 correlative integers and binds click
event handler on each digit.
<template>
<div clas="page">
<text for="{{list}}" onclick="handle($idx,$item)">{{$item}}</text>
</div>
</template>
<style>
.page{
flex-direction: column;
align-items: center;
}
</style>
<script>
export default {
private: {
list: [1,2,3,4,5]
},
handle(index, item, event) {
console.log("Index: " + index);
console.log("Item: " + item);
console.log("Event: " + JSON.stringify(event));
}
}
</script>
After clicking on the last digit, the console shows:
Index:4
Item: 5
Event: {"offsetX":8,"offsetY":724,"pageY":724,"clientY":724,"pageX":75,"clientX":75,"type":"click","target":{"ref":"30","type":"text","attr":{"value":5},"style":{"animationName":null,"fontFamily":[]},"event":["click"]},"currentTarget":{"ref":"30","type":"text","attr":{"value":5},"style":{"animationName":null,"fontFamily":[]},"event":["click"]},"timeStamp":1632828311348}
# Event Handlers with Variable Parameters
Event handler also may receive dynamic parameters, stored in the current component instance.
This example displays a list of 5 correlative integers and binds click
event handler on each digit, passing a variable and the item of the list.
<template>
<div clas="page">
<text for="{{list}}" onclick="handle($idx,$item,result)">{{$item}}</text>
</div>
</template>
<style>
.page{
flex-direction: column;
align-items: center;
}
</style>
<script>
export default {
private: {
list: [1,2,3,4,5],
result: 0
},
handle(index, item, res, event) {
console.log("Index: " + index);
console.log("Item: " + item);
console.log("Result: " + res);
console.log("Event: " + JSON.stringify(event));
}
}
</script>
After clicking on the last digit, the console shows:
Index: 4
Item: 5
Result: 0
Event: {"offsetX":8,"offsetY":717,"pageY":717,"clientY":717,"pageX":75,"clientX":75,"type":"click","target":{"ref":"10","type":"text","attr":{"value":5},"style":{"animationName":null,"fontFamily":[]},"event":["click"]},"currentTarget":{"ref":"10","type":"text","attr":{"value":5},"style":{"animationName":null,"fontFamily":[]},"event":["click"]},"timeStamp":1632828900275}
Read more on events within each essential element.