University of Computer Studies
Web Technology JavaScript programming
Events[Part-II]
JavaScript Group
Department of Information Technology Supporting and Maintenance
Reference Book
• Professional JavaScript for Web Developers , Third Edition By Nicholas C. Zakas
General lecture Plan
• Section 1 • Section 4
What is JavaScript? Document Object Model(DOM) and
JavaScript in HTML DOM Extensions
• Section 5
Variables, Scope, and Memory
Events, Forms and Canvas
• Section 2 • Section 6
Language Basics Client-side Storage
Reference Types
• Section 3
Understanding Objects
Window Object
Outlines
• The Event Object
• Event Type
• Learning Outcomes
• Summary
The Event Object
• All event objects in the DOM are based on the Event Object.
• Event objects has access to the Event Object's properties and methods.
• When an event occurs in HTML, the event belongs to a certain event object, like a mouse
click event belongs to the MouseEvent object.
• All browsers support the event object, though not in the same way.
The DOM Event Object
• The event object is passed in as the sole argument to an event handler.
• The method used to assign the event handler, DOM Level 0 or DOM Level 2, the event
object is passed in.
• Here is an example:
var btn = document.getElementById(“myBtn”);
btn.onclick = function(event){
alert(event.type); //”click”
};
Internet Explorer Event Object
• Internet Explorer event object is accessible in different ways based on the way in which the
event handler was assigned.
• When an event handler is assigned using the DOM Level 0 approach, the event object exists
only as a property of the window object.
• Here is an example:
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
var event = window.event;
alert(event.type); //”click”
};
btn.attachEvent(“onclick”, function(event){
alert(event.type); //”click”
});
The Cross-Browser Event Object
• There are four new methods added to EventUtil in this code.
• The first is getEvent(), which returns a reference to the event object.
• The second method is getTarget(), which returns the target of the event.
• The third method is preventDefault(), which stops the default behavior of an event.
• The fourth method, stopPropagation(), works in a similar way.
The Cross-Browser Event Object (Cont’d)
var EventUtil = { getTarget: function(event){
addHandler: function(element, type, handler){ return event.target || event.srcElement;
//code removed for printing },
}, removeHandler: function(element, type, handler){
getEvent: function(event){ //code removed for printing
return event ? event : window.event; },
}, stopPropagation: function(event){
preventDefault: function(event){ if (event.stopPropagation){
if (event.preventDefault){ event.stopPropagation();
event.preventDefault(); } else {
} else { event.cancelBubble = true;
event.returnValue = false; }
} }
}, };
The Cross-Browser Event Object (Cont’d)
<body>
<a href="https://www.google.com">Link 1</a>
<br>
<a id="a1" href="https://www.google.com">Link 2 (with preventDefault())</a>
</script>
EventUtility.addHandler(document.getElementById("a1"), "click", function(event){
event.preventDefault();
});
</script>
The Cross-Browser Event Object (Cont’d)
<style>
<script>
div {
function func1(event) {
padding: 50px;
alert("DIV 1");
background-color: rgba(255, 0, 0, 0.2);
if
text-align: center; (document.getElementById("check").checked) {
cursor: pointer;
event.stopPropagation();
}
}
</style>
}
</head>
function func2() {
<body>
alert("DIV 2");
<div onclick="func2()" id="d1">DIV 2
}
<div onclick="func1(event)">DIV 1</div>
</div> </script>
Stop propagation: </body>
<input type="checkbox" id="check">
Event Type
• There are numerous categories of events that can occur in a web browser.
• User interface (UI) events are general browser events that may have some interaction with
the BOM.
• Focus events are fired when an element gains or loses focus.
• Mouse events are fired when the mouse is used to perform an action on the page.
• Wheel events are fired when a mouse wheel (or similar device) is used.
• Text events are fired when text is input into the document.
• Keyboard events are fired when the keyboard is used to perform an action on the page.
• Composition events are fired when inputting characters for an Input Method Editor (IME).
• Mutation events are fired when a change occurs to the underlying DOM structure.
• Mutation name events are fired when element or attribute names are changed.
UI Events
• UI events are those events that aren’t necessarily related to user actions.
onload -When the page has been loaded
onload -When an image has been loaded
onerror -When an error occurs when loading an image
onunload-When the browser closes the document
onresize-When the browser window is resized
UI Events
onresize
onload
<body onresize="myFunction()">
<body onload = "test_event()">
<p>Try to resize the browser window to display the
<h2>JavaScript Onunload Event</h2>
windows height and width.</p>
<script>
<p id="demo"></p>
function test_event() {
alert("Loading Page is Loaded Successfully"); <script>
function myFunction() {
} let w = window.outerWidth;
</script> let h = window.outerHeight;
</body> let txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}
</script>
UI Events
onerror
<body>
<img src="image.gif" onerror="myFunction()">
<p>In this example we refer to an image that does not exist, therefore the onerror event occurs.</p>
<script>
function myFunction() {
alert('The image could not be loaded.');
}
</script>
</body>
Mouse Event
onmouseover/onmouseout - When the mouse passes over/out of an element
onmouseover/onmouseout - When moving the mouse over/out of an image
onmouseover - an imagemap
onmousedown/onmouseup - When pressing /releasing a mouse button
onmousemove/onmouseout - When moving the mouse pointer over/out of an image
Mouse Event
<body>
<h2 id="key" onmouseover="over()" onmouseout="out()"> Original Text. </h2>
<script type="text/javascript">
function over()
{
document.getElementById('key').innerHTML= "Onmouseover event has occurred";
}
function out()
{
document.getElementById('key').innerHTML= "Onmouseout event has occurred";
}
</script>
</body>
Mouse Event
<body>
<h2 id="key" onmouseup="up()" onmousedown="down()"> In this example, you can know onmouseup
and onmousedown event. </h2>
<script type="text/javascript">
function up()
{
document.getElementById('key').style.color="red";
}
function down()
{
document.getElementById('key').style.color="blue";
}
</script>
</body>
Mouse Event
<body>
<h2>The onmouseenter and onmouseleave Event</h2>
<img onmouseenter="enter(this)" onmouseleave="leave(this)" border="0" src="dog.jpg" alt="Cutty Dog!"
width="100" height="100">
<script>
function enter(x) {
x.style.height = "300px";
x.style.width = "300px";
}
function leave(x) {
x.style.height = "100px";
x.style.width = "100px";
}
</script>
</body>
Mouse Event
<body> <script>
<p id = "datas" style="color:red !important;"> </p> function demoDIVFunction(element) {
document.getElementById("datas").innerHTML = "JavaScript Mouse move
<p id = "demos" style="color:navy !important;"> </p>
function with object using html tag activates successfully!!!";
<div id = "demoDIV" onmousemove = “moveFunction(event)" onmouseout = document.getElementById("demoDIV").style.color = "white";
"clearFunction()"> document.getElementById("demoDIV").style.backgroundColor = "black";
The javascript mousemove event with the Html tag uses with the mouse movement event
var x_id = element.clientX;
on the web page. When we move the mouse or pointer with the event handler, operate the
var y_id = element.clientY;
div tag of the html page.
var coo = "Coordinates are: (" + x_id + "," + y_id + ")";
</div> document.getElementById("demos").innerHTML = coo;
<script> }
function clearCoo() {
function demoDIVFunction(element) {
document.getElementById("datas").innerHTML = "The mousemoveevent
document.getElementById("datas").innerHTML = "JavaScript Mouse move function with stop because of the pointer";
object using html tag activates successfully!!!"; }
document.getElementById("demoDIV").style.color = "white"; </script>
</body>
Input Event
onblur -when a user leaves an input field
onchange -when a user changes the content of an input field
onchange-when a user selects a dropdown value
<body> <body>
<h2>The blur Event</h2> <h2>The onchange Event</h2>
Enter your name: <input type="text" id="fname" Enter your name: <input type="text" id="fname"
onblur="myFunction()"> onchange="myFunction()">
<script> <p>When you leave the input field, a function is triggered
function myFunction() { which transforms the input text to upper case.</p>
let x = document.getElementById("fname"); <script>
x.value = x.value.toUpperCase(); function myFunction() {
} var x = document.getElementById("fname");
</script> x.value = x.value.toUpperCase();
</body> }
</script>
</body>
Input Event
<body>
<p>Select a sebject from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="html">HTML</option>
<option value="java">Java</option>
<option value="php">PHP</option>
</select>
<p>When you select a select, a function is triggered which outputs the value of the selected subject.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
Click Event
onclick - When button is clicked
ondbclick -When a text is double-click
<body>
<h2>The ondblclick Event</h2>
<p id="demo">Double-click me.</p>
<script>
document.getElementById("demo").ondblclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "I was double-clicked!";
}
(OR)
document.getElementById("demo").addEventListener("dblclick", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "I was double-clicked!";
}
</script>
</body>
DOM Event
Start with this webpage, which has inputs and buttons for things to calculate.
Learning Outcomes
Student will
• understand event flow
• know working with the event handler get the knowledge of event object
• examine the different types of events
Summary
• Events are one of the most important topics in JavaScript, and a good understanding of how they
work and their performance implications is critical.
Next Lecture Content
• Scripting Forms
University of Computer Studies
Thank you!
