Scribd
Upload
19 views

Lecture 17 Java Script Part4

Uploaded by

kananiparth04
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

Lecture 17 Java Script Part4

Uploaded by

kananiparth04
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

Java Script

Module 2

Prepared By: Mr. Vaibhav


Content
• DOM Events
• DOM Eventhandlers

Prepared By: Mr. Vaibhav


DOM Events

Prepared By: Mr. Vaibhav


JavaScript HTML
DOM Events
Examples of HTML events:
• HTML DOM allows JavaScript to react to HTML events • When a user clicks the mouse
• A JavaScript can be executed when an event occurs, like • When a web page has loaded
when a user clicks on an HTML element.
• When an image has been loaded
• To execute code when a user clicks on an element, add
• When the mouse moves over an
JavaScript code to an HTML event attribute:
element
• onclick=JavaScript
• When an input field is changed

• When an HTML form is submitted

• When a user strokes a key

Prepared By: Mr. Vaibhav


Assign events using HTML DOM
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>


<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


Changing Element with Click

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>


The content of the <h1> element is
<h2 onclick="this.innerHTML='Ooops!'">Click on this text! changed when a user clicks on it
</h2>

</body>
</html>

Prepared By: Mr. Vaibhav


Changing Element with Click

<!DOCTYPE html>
<html>
<body>
• The content of the <h1> element is
<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2> changed when a user clicks on it.
<script>
function changeText(id) { • Here function is called from the
id.innerHTML = "Ooops!";
} event handler
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


Assign events using Element Attributes
<!DOCTYPE html>
<html> • To assign events to HTML
<body>
elements you can use event
<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p> attributes.
<button onclick="displayDate()">The time is?</button>
• Assign an onclick event to a
<script>
function displayDate() {
button element
document.getElementById("demo").innerHTML = Date();
} • For this example, a function
</script>
named displayDate() will be
<p id="demo"></p>
executed when the button is
</body>
</html> clicked.

Prepared By: Mr. Vaibhav


Assign events using HTML DOM
<!DOCTYPE html> • The HTML DOM allows you to
<html>
<body> assign events to HTML elements
<h2>JavaScript HTML Events</h2> using JavaScript
<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button> • In the example above, a function


<p id="demo"></p> named displayDate is assigned to
<script> an HTML element with the
document.getElementById("myBtn").onclick = displayDate;
id="myBtn"
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


The onload and onunload Events • The onload and onunload events are

<!DOCTYPE html> triggered when the user enters or


<html>
<body onload="checkCookies()"> leaves the page.

<h2>JavaScript HTML Events</h2>

<p id="demo"></p> The onload event:


<script>
function checkCookies() { • Used to check the visitor's browser
var text = "";
if (navigator.cookieEnabled == true) {
type and browser version
text = "Cookies are enabled.";
} else { • load the proper version of the web
text = "Cookies are not enabled.";
} page based on the information.
document.getElementById("demo").innerHTML = text;
}
</script>
• The onload and onunload events can
</body>
</html> be used to deal with cookies.

Prepared By: Mr. Vaibhav


The onchange Events • The onchange event is often used in
combination with validation of input

<!DOCTYPE html> fields.


<html>
<body>

<h2>JavaScript HTML Events</h2>


Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input In the example
text to upper case.</p>

<script>
function upperCase() {
The upperCase() function will be called
const x = document.getElementById("fname");
x.value = x.value.toUpperCase(); when a user changes the content of an
}
</script> input field.
</body>
</html>

Prepared By: Mr. Vaibhav


The onchange Events
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>


Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input
text to upper case.</p>

<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


The Mouse Events • The onmouseover event

<!DOCTYPE html> • The onmouseout events


<html>
<body> They can be used to trigger a function
<div onmouseover="mOver(this)" onmouseout="mOut(this)" when the user mouses over, or out of,
style="background-
color:#D94A38;width:120px;height:20px;padding:40px;"> an HTML element
Mouse Over Me</div>

<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}

function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


The Mouse Events • onmousedown event: when a
mouse-button is clicked, the
<!DOCTYPE html>
<html> onmousedown event is triggered
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"


• onmouseup event: when the mouse-
style="background- button is released, the onmouseup
color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div> event is triggered
<script>
• onclick event: when the mouse-click
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5"; is completed, the onclick event is
obj.innerHTML = "Release Me";
} triggered
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


The onfocus Events
<!DOCTYPE html>
<html>
<head> • onfocus event: Change the
<script>
function myFunction(x) { background-color of an input field
x.style.background = "yellow";
} when it gets focus.
</script>
</head>
<body>

Enter your name: <input type="text" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered


which changes the background-color.</p>

</body>
</html>

Prepared By: Mr. Vaibhav


DOM EventListener

Prepared By: Mr. Vaibhav


The addEventListener()
method
• It attaches an event handler to the specified element.

• It attaches an event handler to an element without overwriting existing event handlers.

• We can add
• many event handlers to one element.

• many event handlers of the same type to one element, i.e two "click" events.

• event listeners to any DOM object not only HTML elements. i.e the window object.

• The addEventListener() method makes it easier to control how the event reacts to bubbling.

• When using the addEventListener() method, the JavaScript is separated from the HTML markup,
for better readability and allows you to add event listeners even when you do not control the
HTML markup.

• We can easily remove an event listener by using the removeEventListener() method.


Prepared By: Mr. Vaibhav
The addEventListener()
method

Syntax:

element.addEventListener(event, function, useCapture);

• The first parameter is the type of the event (like "click" or "mousedown" or any other HTML DOM Event.)

• The second parameter is the function we want to call when the event occurs.

• The third parameter is a boolean value specifying whether to use event bubbling or event capturing. (optional).

Note that you don't use the "on" prefix for the event; use "click" instead of "onclick".

Prepared By: Mr. Vaibhav


Example
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a


button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("Hello World!");
});
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


Example • Here external function displaydate( ) is written.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


Many Event Handler to same element
• Two events are defined for button
<!DOCTYPE html>
<html> click
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click


events to the same button.</p>

<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
alert ("Hello World!");
}

function someOtherFunction() {
alert ("This function was also executed!");
}
</script>

</body>
</html>
Prepared By: Mr. Vaibhav
<!DOCTYPE html>
<html>
Many Event Handler to
<body> same element
<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on • You can add events of different types to
the same button.</p>
the same element
<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html> Prepared By: Mr. Vaibhav
Passing Parameters • When passing parameter values, use an
<!DOCTYPE html>
<html> "anonymous function" that calls the
<body>
specified function with the parameters
<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using


the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click",
function() {
myFunction(p1, p2);
});

function myFunction(a, b) {
document.getElementById("demo").innerHTML = a * b;
}
</script>

</body> Prepared By: Mr. Vaibhav


Event Bubbling or Event Capturing?

There are two ways of event propagation in the HTML DOM

• Bubbling: In bubbling the inner most element's event is handled first and then the outer

• Capturing: In capturing the outer most element's event is handled first and then the inner

Event propagation is a way of defining the element order when an event occurs.

• Scenario: If you have a <p> element inside a <div> element, and the user clicks on the <p> element,
which element's "click" event should be handled first?

• In bubbling: the <p> element's click event is handled first, then the <div> element's click event. (Bottom to top)

• In capturing: the <div> element's click event will be handled first, then the <p> element's click event. (Top to
Bottom)
Prepared By: Mr. Vaibhav
Event Bubbling or Event Capturing?

Syntax:

With the addEventListener() method we can specify the propagation type by using the "useCapture"
parameter:

addEventListener(event, function, useCapture);

• The default value is false, which will use the bubbling propagation,

• when the value is set to true, the event uses the capturing propagation.

Prepared By: Mr. Vaibhav


<!DOCTYPE html>
<html>
Event Bubbling and Event
<head> Capturing
<style>
#myDiv1, #myDiv2 {
<script>
background-color: coral;
document.getElementById("myP1").addEventListener("clic
padding: 50px;
k", function() {
}
alert("You clicked the white element!");
}, false);
#myP1, #myP2 {
background-color: white;
document.getElementById("myDiv1").addEventListener("cl
font-size: 20px;
ick", function() {
border: 1px solid;
alert("You clicked the orange element!");
padding: 20px;
}, false);
}
</style>
document.getElementById("myP2").addEventListener("clic
<meta content="text/html; charset=utf-8" http-
k", function() {
equiv="Content-Type">
alert("You clicked the white element!");
</head>
}, true);
<body>
document.getElementById("myDiv2").addEventListener("cl
<h2>JavaScript addEventListener()</h2>
ick", function() {
alert("You clicked the orange element!");
<div id="myDiv1">
}, true);
<h2>Bubbling:</h2>
</script>
<p id="myP1">Click me!</p>
</div><br>
</body>
</html>
<div id="myDiv2">
<h2>Capturing:</h2>
<p id="myP2">Click me!</p>
</div> Prepared By: Mr. Vaibhav
Event Bubbling and Event Capturing
<script>
document.getElementById("myP1").addEventListener("clic
k", function() {
alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("cl
ick", function() {
alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("clic
k", function() {
alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("cl
ick", function() {
alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

Prepared By: Mr. Vaibhav


<!DOCTYPE html> The
<html>
<head>
removeEventListener()
<style> method
#myDIV {
background-color: coral; border: 1px solid; padding: 50px; color: white; font- It removes event handlers
size: 20px;
} that have been attached
</style>
with the
</head>
<body> addEventListener()
<h2>JavaScript removeEventListener()</h2> method:

<div id="myDIV">
<p>This div element has an onmousemove event handler that displays a random number
every time you move your mouse inside this orange field.</p>
<p>Click the button to remove the div's event handler.</p>
<button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
Prepared
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); By: Mr. Vaibhav

You might also like