An event is a signal that some action has taken place. There are many types of events like keyboard events, mouse events, etc.

For sake of understanding, we are dividing events into two broad types.

Browser Events: Any change that happens on the browser, for example, typing with your keyboard in a text field, clicking on the button using a mouse, etc.

Custom Events:  Any event which is generated programmatically and is not a browser event.

Event Handlers: These are javascript functions that get called upon when an event takes place.

To bind event handler ( javascript function) on a template we use event name with “on”  keyword as a prefix for example for click event we will write as     

“ onclick={eventHandlerName}”

Let’s take a look at examples now : 

Example 1: 

We are simply taking input from the user then on the “change” event we are sending value to the javascript event handler (function ie handleChange)

We have used if:true and If:false directive to render the div portion depending on whether the value of {even} evaluates to true or false.

Note: Content is removed from DOM not just hidden on UI ie you can’t find the element even in the browser console.

• In the Javascript file, we have created a  getter by the name “even” which computes the mod of the number and returns true if the number is even.
• “handleChange” is an event handler where we have passed the event object.
• Event objects are standard javascript object which contains all the information about an event that has occurred for instance in our case we used an event object to get the value that the user entered in the text field.

Code:

----- JS -------
import { LightningElement } from "lwc";
export default class Basic1 extends LightningElement {
number = 0;
get even(){
return this.number % 2 === 0 ? true  : false ;
}
handleChange(event){
this.number = event.target.value;
}
}
----END -------
------HTML ------
<template> 
<lightning-card variant="Narrow" title="Basic 2" icon-name="standard:account">
<lightning-input class = "slds-var-m-around_medium" type="number" variant="standard" name="Number" label="Number" placeholder="Enter the number" onchange={handleChange}></lightning-input>
<!-- Notice how we used directives to add or remove div element from DOM depending on what is returned by {even} -->
<div class= "slds-var-m-around_medium" if:true ={even}>
Number you have entered is even number
</div>
<div class="slds-var-m-around_medium" if:false ={even}>
Number you have entered is odd number
</div>
</lightning-card>
</template>

Output 

Example 2 : 

In the below HTML file, we have added two lightning cards one for each type of directive (for:each and iterator:iteratorName)

When using for:each directive we pass the whole list in for:each ={listofItems} and for:item=”item” represents current item in the iteration.

As you will notice we have also a “key” attribute to the “li” element as without a key attribute we cant use either of the aforementioned directives.

We are simply displaying name property from contact object by accessing current item ie “con” and using “.” notation to access object property as “con.name” and as we read earlier we use braces to bind the properties and hence {con.name}

In Iterator directive we pass array as iterator:it={listName}. In iterator we cant access the property of the current item directly like we did in for:each rather we have to use the “value” keyword for example “ it.value.Id” or “it.value.Name” 

As we discussed earlier iterator has two special properties to identify the first and the last item which we can use to add any special effect. We can access first and last element by using {it.first} or {it.last}.

Both the {it.first} and {it.last} return the boolean value ie true or false and hence are  are used with if:true directive to manipulate the content

Note: “it” is the iterator name you can choose any name for your iterator.

JS : 

JS here only holds a simple object with predefined values in it.

Code

-----JS-----
import { LightningElement } from "lwc";
export default class Basic1 extends LightningElement {
primitiveData;
contacts = [
{
Id: 1,
Name: 'Amy Taylor',
Title: 'VP of Engineering',
},
{
Id: 2,
Name: 'Michael Jones',
Title: 'VP of Sales',
},
{
Id: 3,
Name: 'Jennifer Wu',
Title: 'CEO',
},
];
}
-----END ------
-----HTML----
<template> 
<lightning-card variant="Narrow" title="For Each Loop" icon-name="standard:account">
<div class="slds-var-m-around_medium">
<template for:each={contacts} for:item="con">
<li key={con.Id}>
{con.Name}
</li>
</template>
</div>
</lightning-card>
<lightning-card variant="Narrow" title="Iterator Loop" icon-name="standard:account">
<div class="slds-var-m-around_medium">
<template iterator:it={contacts}>
<ul key={it.value.Id}>
<div if:true={it.first} class="list-first">
</div>
<li>{it.value.Name}</li>
<div if:true={it.last} class="list-last">
</div>
</ul>
</template>
</div>
</lightning-card>
</template>

Output :