Scribd
Upload
33 views9 pages

05 Sep 2023

Notes

Uploaded by

Pravr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
33 views9 pages

05 Sep 2023

Notes

Uploaded by

Pravr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

JavaScript Events

- Event is a message sent by sender to its subscriber in order to notify the


change.
- It follows a software design pattern called "observer".
- Observer is a communication pattern.

Syntax:
function InsertClick() => subscriber
{

<button onclick="InsertClick()"> => sender

- Subscriber defines actions to perform.


- Sender triggers the notification.
- JavaScript events have 2 default arguments
a) this
b) event

<button onclick="InsertClick(this, event)">

- "this" sends information about current element, which includes


id, name, className, width, height, src, href etc..

- "event" sends information about current event, which includes


clientX, clientY, shiftKey, ctrlKey, altKey etc..

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function InsertClick(obj, e){
document.write(`
Button Id: ${obj.id} <br>
Button Value: ${obj.value} <br>
Class Name : ${obj.className} <br>
X Position : ${e.clientX} <br>
Ctrl Key : ${e.ctrlKey}
`);
}
</script>
</head>
<body>
<button onclick="InsertClick(this,event)" id="btnInsert" value="Insert"
class="btn btn-primary">Insert</button>
</body>
</html>

- You can also send custom arguments using event.


- Custom argument can be any type,
a) Primitive
b) Non Primitive
c) function etc..
Syntax:
function handleClick(obj, collection)
{
}

<button onclick="handleClick( { }, [ ] )">

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function InsertClick(obj, e, product){
document.write(`
Button Id: ${obj.id} <br>
Button Value: ${obj.value} <br>
Class Name : ${obj.className} <br>
X Position : ${e.clientX} <br>
Ctrl Key : ${e.ctrlKey} <br>
Name : ${product.Name} <br>
Price: ${product.Price}
`);
}
</script>
</head>
<body>
<button onclick="InsertClick(this,event,{Name:'TV', Price:24500.44})"
id="btnInsert" value="Insert" class="btn btn-primary">Insert</button>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Database(value){
switch(value){
case "Insert":
document.write("Record Inserted");
break;
case "Update":
document.write("Record Updated");
break;
case "Delete":
document.write("Record Deleted");
break;
}
}
</script>
</head>
<body>
<button value="Insert" onclick="Database(this.value)">Insert</button>
<button value="Update" onclick="Database(this.value)">Update</button>
<button value="Delete" onclick="Database(this.value)">Delete</button>
</body>
</html>

- Every event comprises of following

a) Event
b) Event Handler
c) Event Listener

onclick="InsertClick()" => Event Handler


onclick => Event

- If element is dynamically created, then we have to configure events using


EventListener.
- EventListener requires various events to configure dynamically, the JavaScript
events are classifed into following categories

1. Mouse Events
2. Keyboard Events
3. Button Events
4. Form Events
5. Touch Events
6. Element State Events
7. Timer Events
8. Clipboard Events etc..

Mouse Events
- onmouseover
- onmouseout
- onmousedown
- onmouseup
- onmousemove

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
marquee {
padding: 100px;
}
img:hover {
transform: scale(2);
box-shadow: 4px 4px 2px black;
transition: 2s;
margin: 50px;
}
</style>
</head>
<body>
<marquee scrollamount="20" onmouseover="this.stop()" onmouseout="this.start()">
<img src="../public/images/a1.jpg" width="100" height="100">
<img src="../public/images/a2.jpg" width="100" height="100">
<img src="../public/images/a3.jpg" width="100" height="100">
<img src="../public/images/a4.jpg" width="100" height="100">

</marquee>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function DisplayAd2(){
document.getElementById("pic").src="../public/images/a2.jpg";
}
function DisplayAd1(){
document.getElementById("pic").src = "../public/images/a1.jpg";
}
</script>
</head>
<body>
<img onmousedown="DisplayAd2()" onmouseup="DisplayAd1()"
src="../public/images/a1.jpg" id="pic">
<p>hold down mouse button</p>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Animate(e){
var flag = document.getElementById("flag");
flag.style.position = "fixed";
flag.style.top = e.clientY + "px";
flag.style.left = e.clientX + "px";
}
</script>
</head>
<body onmousemove="Animate(event)">
<div style="height:1000px"></div>
<img id="flag" src="../public/images/flag.gif" width="50" height="50">
</body>
</html>

Keyboard Events
- onkeyup
- onkeydown
- onkeypress

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>

function SetMeter(min, max, value){


var status = document.getElementById("status");
status.min = min;
status.max = max;
status.value = value;
}

function VerifyPassword(){
var password = document.getElementById("txtPwd").value;
var regExp = /(?=.*[A-Z])\w{4,15}/;
var pwdError = document.getElementById("pwdError");
if(password.match(regExp)){
pwdError.innerHTML = "Strong Password".fontcolor('green');
SetMeter(1,100,100);
} else {
if(password.length<4){
pwdError.innerHTML = "Poor Password-min 4 chars
required".fontcolor('red');
SetMeter(1,100,30);
} else {
pwdError.innerHTML = "Weak Password-1 must be uppercase
letter".fontcolor('gold');
SetMeter(1,100,70);
}
}
}
</script>
<style>
meter {
width: 170px;
}
</style>
</head>
<body>
<dl>
<dt>Your Password</dt>
<dd>
<input type="password" id="txtPwd" onkeyup="VerifyPassword()">
</dd>
<dd>
<meter id="status" min="1" max="100" value="1"></meter>
</dd>
<dd id="pwdError"></dd>
</dl>
</body>
</html>
Button Events
- onclick : single click
- ondblclick : double click
- oncontextmenu : right click
- onselectstart : hold down the button and drag to select

Note: If any event you want to disable, then define "return false".

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function ViewImage(){
window.open("../public/images/realme.jpg","Realme","width=300
height=400");
}
document.oncontextmenu = function(){
alert(`Right Click Not Allowed`);
return false;
}
document.onselectstart = function(){
return false;
}
</script>
</head>
<body>
<p>Right click & selection diabled</p>
<img ondblclick="ViewImage()" src="../public/images/realme.jpg" width="200"
height="200">
<p>Double click to view large</p>
</body>
</html>

Element State Events


- onchange
- onblur
- onfocus

Clipboard Events
- oncut
- oncopy
- onpaste

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Cut(){
document.querySelector("p").innerHTML = "Removed and Copied to
Clipboard";
}
function Copy(){
document.querySelector("p").innerHTML = "Copied to Clipboard";
}
function Paste(){
document.querySelector("p").innerHTML = "Inserted from Clipboard";
}
</script>
</head>
<body>
<textarea oncut="Cut()" oncopy="Copy()" onpaste="Paste()" rows="4"
cols="40"></textarea>
<p></p>
</body>
</html>

Timer Events
- setTimeout()
- clearTimeout()
- setInterval()
- clearInterval()

Touch Events
- ontouchstart
- ontouchend
- ontouchmove

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Aws(){
document.querySelector("p").innerHTML = "Special Offer on - Cloud
Computing - 50% OFF";
}
function UI(){
document.querySelector("p").innerHTML = "New UI Fullstack Development
Batch - With React";
}
</script>
</head>
<body>
<img ontouchstart="Aws()" src="../public/images/aws.jpg" width="200"
height="200" id="aws">
<img ontouchstart="UI()" src="../public/images/ui.jpg" width="200" height="200"
id="ui">

<p></p>
</body>
</html>

Storage in JavaScript

You might also like