JavaScript Unit 2

Interactive Content and Event Listeners

Complete Learning Notes

1. Interactive Content

Interactive content means web pages respond to user actions such as clicking, typing, mouse movement, scrolling and submitting forms.

JavaScript creates interactivity by detecting events and executing functions.

2. What is an Event?

An event is a signal that something happened in the browser.

3. Three Ways to Attach Event Handlers

Method 1 - Inline HTML

<button onclick="showMessage()">Click me</button>

function showMessage(){
   alert("Button was clicked");
}
Inline handlers are easy for beginners but mix HTML and JavaScript.

Method 2 - JavaScript Property

const btn=document.getElementById("myButton");

btn.onclick=function(){
   alert("Button clicked via property");
};
Only one function can be assigned using onclick.

Method 3 - addEventListener (Recommended)

const button=document.getElementById("btn");

function handleClick(){
   alert("Button clicked");
}

button.addEventListener("click",handleClick);
Multiple listeners can be attached using addEventListener(). 
button.addEventListener("click",()=>{
 console.log("First");
});

button.addEventListener("click",()=>{
 console.log("Second");
});

4. Page Load Events

DOMContentLoadedload
DOM parsedEntire page including images loaded
Runs earlierRuns later
document.addEventListener("DOMContentLoaded",()=>{
 console.log("DOM Ready");
});

window.addEventListener("load",()=>{
 console.log("Window Loaded");
});

5. Event Object and event.target

button.addEventListener("click",function(event){
 output.textContent="You entered: "+input.value;
 console.log(event.target.id);
});

6. Event Bubbling

Events move from the clicked element to its parent elements.

button → div → body → html → document
wrapper.addEventListener("click",()=>{
 console.log("Wrapper");
});

inner.addEventListener("click",()=>{
 console.log("Inner");
});

Stopping Bubbling

inner.addEventListener("click",(event)=>{
 event.stopPropagation();
});

7. Form Events and Validation

change Event

first.addEventListener("change",updateOutput);
second.addEventListener("change",updateOutput);

paste Event

pasteField.addEventListener("paste",()=>{
 message.textContent="You pasted text.";
});

submit Event

form.addEventListener("submit",function(event){

 event.preventDefault();

 if(!firstName.value || !lastName.value || !age.value){
    result.textContent="All fields are required.";
    return;
 }

 if(Number(age.value)<=0){
    result.textContent="Age must be positive.";
    return;
 }

 result.textContent="Submitted Successfully";

});

8. Focus and Blur Events

focusField.addEventListener("focus",()=>{
 status.textContent="Focused";
});

focusField.addEventListener("blur",()=>{
 status.textContent="Lost Focus";
});

9. Progressive Project - Voting Counter

let votes=0;

voteButton.addEventListener("click",()=>{
 votes++;
 votesDisplay.textContent="Votes: "+votes;
});
This project demonstrates state change using JavaScript events.

Important Concepts Summary