Home »
JavaScript
Interactive Webpages / Event Handling in JavaScript
In this article, we are going to learn about Interactive webpages/event handling in JavaScript.
Submitted by Mansha Lamba, on October 06, 2018
Programming languages like C, C++ etc are all based on synchronous coding approach i.e. the execution takes place from top to bottom in a linear manner.
But JavaScript follows a different approach, it is based on asynchronous coding. Instead of traversing from top to bottom it executes through event handling.
Events occur and get stacked in browser processor if a handler is associated with it, it is called and executed.
JS has many inbuilt objects with loads of events. In this article, we are going to use one of them i.e. window object and its resize event.
Example: HTML file with internal JS within script tags
<html lang="en">
<head>
<meta charset="utf-8">
<title>Don't resize me, I'm ticklish!</title>
<script>
function resize() {
var element = document.getElementById("display");
element.innerHTML = element.innerHTML + " that tickles!";
}
</script>
</head>
<body>
<p id="display">
Whatever you do, don't resize this window! I'm warning you!
</p>
<script>
window.onresize = resize;
</script>
</body>
</html>
HTML code is as usual. In the second script tag, I have used an inbuilt object of JS i.e. window that represents the interface of the browser in which you are running the above code. This window has many parameters, methods, events.
Here its onresize event is being used, whenever you will change the size of your browser's window this event will be generated and get added to browser's processor stack.
After that in line number 18 itself, this event has been assigned a handler by the name of resize.
Remember:
If no handler is assigned to an event, it still gets added to processor stack but nothing happens in response to it.
Also, note that resize is nothing but a function defined in the first script tag.
Caution:
You don’t need brackets in line number 18 after the function resize because you are not calling it, instead, we are just assigning it to an event as an event handler.
Now, in line number 7, in resize function I have accessed paragraph element of HTML file through id of the paragraph element. via DOM ( DOCUMENT OBJECT MODEL ) created by the browser.
Also, one should be aware that document ( in line number 8 ) is another inbuilt object in js that represents the DOM generated by the browser or in other words we can say that Javascript uses document object to get access to DOM created by the browser. Like any other inbuilt object, it too has many methods in it, one of them being getElementByID.
getElementByID is seen very commonly in the source code of interactive web pages.
It takes an id as an argument and returns an OBJECT representing HTML tag with that id.
Now this DOM object comes with many useful methods giving loads of powers to developers.
Its innerHTML gives access to the text inside that particular tag.
Hence, appending THAT TICKLES each time the function resize is called or to be more particular the event onresize occurs.
I hope this was a great insight into event handling in js and the most comprehensive explanation of the above-mentioned code.
Event handling is a great asset of javascript which can be used to create heavily responsive and dynamic web pages.
I will be covering many other kinds of events available in js in my upcoming articles so STAY TUNED and keep practicing.
JavaScript Tutorial »