Event Handling 1 :
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8" / >
<meta http-equiv="X-UA-Compatib1e" content="IE=edge" / >
<meta name="viewport" content="width=device-width, initial-scale=l.e"
< link rel="icon" / >
< link rel="stylesheet" href="index.css" / >
<title>< Bootcamp</title>
</head>
<body>
<div class="main">
<button Id ="button">CIick Me! < / button>
</div>
<script src=" ./index.js"></script>
</html>
const button = document.getElementBtid ("button"); //select id
console.log(button);
output:
<button id="button"> <button>
click Event:
//event?
button.addEventListener ('click', ( ) =>{ //add event
//anomoys function
// console.log('button clicked');
alert('button clicked'); //pop up
});
Mouse Events:
//event?
button.addEventListener('mouseover', ( ) =>{ //add hover event
//mouse
button.classList.add("buttonHover"); // styles implement to jscript
// css style name
});
mouseout Event
// event?
button.addEventListener('mouseout', ( ) =>{ //remove hover event
button.classList.remove("buttonHover");
// css style name
});
keydown Event
//event? //argument
document.addEventListener('keydown', ( event ) =>{ //keyboard event // key press panna displaylaa show aagum.
// enter key (key board)
if (event.key === 'Enter'){ // enter aluthum poothu
alert('Enter Key is Pressed!'); // display pop up on window
});
keypress Events:
//event? //argument
document.addEventListener('keypress', ( event ) =>{ //keyboard event // key press panna displaylaa show aagum.
// enter key (key board)
if (event.key === 'Enter'){ // enter aluthunaathi mudichi apram trigger agum
alert('Enter Key is Pressed!'); // display pop up on window
});
keyup Events:
//event? //argument
document.addEventListener('keyup', ( event ) =>{ //keyboard event // key press panna displaylaa show aagum.
// enter key (key board)
if (event.key === 'Enter'){ //key aluthittu release pannni mela vaarumpothu show aaum
alert('Enter Key is Pressed!'); // display pop up on window
});
Shift Events:
//event? //argument
document.addEventListener('keydown', ( event ) =>{ //keyboard event // key press panna displaylaa show aagum.
// enter key (key board)
if (event.shiftkey){ // shift key pressed
alert('shift Key is Pressed!'); // display pop up on window
});
Ctrl Events:
//event? //argument
document.addEventListener('keydown', ( event ) =>{ //keyboard event // key press panna displaylaa show aagum.
//anomoys function
// enter key (key board)
if (event.ctrlkey){ // shift key pressed
alert('ctrl Key is Pressed!'); // display pop up on window
});
Alphabets Events:
//event? //argument
//document.addEventListener('keydown', ( event ) =>{ //keyboard event // key press panna displaylaa show aagum.
if (event.key => 'a' && event.key <= 'z'){ // enter alphabets key pressed
alert('alphabets Key ' ${ event.key}' pressed!'); // display pop up on window
});
Number Events:
if (event.key => '0' && event.key <= '9'){ // enter number key pressed
alert('alphabets Key ' ${ event.key}' pressed!'); // display pop up on window
});
Event Handling 2 :
Input Events:
// var name input -id name
const inputName = document.getElementById("name");
//input -id name
const outputName = document.getElementById("name-output");
console,log (inputName);
//event? //argument
inputName.addEventListener('input', ( ) =>{
//anomoys function //r
//a
//ra
outputName.textContent = "Typed Name: ${ inputName.Value}" // input ulla press pannA PANNA TIGGER aagum
});
Change Event:
drop down menu event
// var name // input -id name
const carSelect = document.getElementById("car");
//output id //input -id name
const selectCar = document.getElementById(" select-car");
//event? //argument
carSelect.addEventListener('change', ( ) =>{
//anomoys function
selectCar.textContent = "select Car : ${ carSelect .Value}" // select panna value vaa killa kattum (shuow)
});
Event Handling 3
form Event:
// var name form -id name
const feedbackForm = document.getElementById("feedbackForm");
// //select two element's
//another id //div -id name
const responseDiv = document.getElementById("response ");
console,log (feedbackForm);
//event? //argument
feedbackForm.addEventListener('subnit', ( functin ( event ) =>{
//anomoys function
//trigger event
event.preventDefault (); // input ulla press pannA PANNA TIGGER aagum
feedbackForm.addEventListner("submit", function ( event)){
event.preeventDefault();
const formData = new FormData(this);
console.log('formDats'); // ithu vara key value pair aa kaatum
const formDataJson ={}; //json format converting
formData.forEach((value,key ) => {
formDataJson[ key ] = value; // object formatt aa show aagum.
});
console.log('formDataJson ');
const jsonString = JSON.stringif ( formDataJson, null ,2);
responseDiv.innerHTML = "<pre> $ { jsonString } </pre>"; // ui laa string aa display aagum
feedbackForm.rest(); // rest event
});
Event Handling 4
Window Event :
window.addEventListner ("resize", ( ) =>{
const dimensions = " window dimensions: ${window.innerWidth}px x ${window.innerHeihjt}px';
document.getElementById (" dimensions").textContent = dimensions ;
});
load Events:
window.addEventListner("load", ( ) =>{
console.log('window loaded');
});
Scroll Events:
window.addEventListner("scroll", ( ) =>{
console.log('window scrolled');
});
Top comments (0)