Scribd
Upload
3 views24 pages

JavaScript Events 061827

JavaScript events are actions that occur in the browser, triggered by user interactions or browser actions, making web pages interactive and responsive. There are various event models and types, including mouse, keyboard, and window events, with event handlers defined to respond to these events. Inline event handling is simple but not ideal due to separation of concerns; using event handling functions is a more efficient approach to manage events.

Uploaded by

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

JavaScript Events 061827

JavaScript events are actions that occur in the browser, triggered by user interactions or browser actions, making web pages interactive and responsive. There are various event models and types, including mouse, keyboard, and window events, with event handlers defined to respond to these events. Inline event handling is simple but not ideal due to separation of concerns; using event handling functions is a more efficient approach to manage events.

Uploaded by

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

JavaScript Event

What is Javascript Events?

• The Javascript interacts with the documents HTML


code using events, which are triggered when a
particular moment of interest happens in the
document or the browser window.
• JavaScript Events are actions or occurrences that
happen in the browser. They can be triggered by
various user interactions or by the browser itself.
• Common events include mouse clicks, keyboard
presses, page loads, and form submissions.
• Javascript Events makes the webpages
interactive and responsive.
• These events are asynchronous (i.e it can
occur anytime).
• Most events are triggered by user action but
there are some exceptions like the event load
•
• When an event occurs there are some default
action which the browser takes(like clicking
on a link open up the location specified in
attribute href).
• An event may be a click, mouseover,
keystroke etc.
• Javascript responds to events by calling a
function which performs some task as defined
in the function.
• As of today, Javascript has three event models
for programming events: the inline model ,
the Scripting Model and the DOM2 Model
• Javascript can respond to the following type of
events: Mouse Actions , Keyboard Actions ,
Form Actions , Page Loads , Time Intervals
and Errors
Javascript Events : Inline Event Handling

• Event handlers are JavaScript functions that


respond to these events, allowing developers
to create interactive web applications
• The most easiest and the simplest way to handle
events is by using Inline Events.
• To create an Inline Event you need a simple
event handler and event attribute
• HTML elements define an event attribute for
each of the event which can be supported.
• Eg onclick event attribute is the attribute for
global onclick event, which gets triggered
when the element is clicked.
• In the below demo, when the event is triggered
the browser sets the value of the special
variable this to the HTML Element Object
representing the element that triggered the
event.
Example: Javascript Event Handling using Inline HTML.

• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Example: Javascript Inline Event Handlers </title>
• <style>
• p{font-family:Verdana;
• background:#FA8B7C;
• color:#fff;
• padding:10px; border:4px solid #555;}
• </style>
• </head>
• <body>
• <p onmouseover="this.style.background='#44c767';
• this.style.fontStyle='arial'">
• A system of morality which is based on relative
• emotional values is a mere illusion, a thoroughly vulgar
• conception which has nothing sound in it and nothing true.
• </p>
• <i>Hover over the text to see the effects.</i>
• </body>
• </html>
Javascript Events: HTML Inline Event Handling

• In the above example the transition of style is one


way, i.e the style doesn't reset when the mouse
leaves the target element
• The counter event to the mouseover is the event
mouseout , the corresponding event attribute is
onmouseout .
• Inline Event handling method is not ideal as it
voilates the principle of seperation of layers, which
says that the markup must be kept seperate from the
JavaScript.
Example: Javascript DOM : Event Handling using Inline Event

• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Example: Javascript Inline Event Handlers </title>
• <style type="text/css">
• p{font-family:Verdana;
• background:#FA8B7C;
• color:#fff;
• padding:10px; border:4px solid #555;}
• </style>
•
• </head>
• <body>
• <p onmouseover="this.style.background='#44c767';this.style.fontStyle='italic'"
• onmouseout="this.style.removeProperty('background');
• this.style.removeProperty('font-style')">
• A system of morality which is based on relative
• emotional values is a mere illusion, a thoroughly vulgar
• conception which has nothing sound in it and nothing true.
• </p>
• <i>Hover over the text to see the effects.</i>
• </body>
• </html>
Javascript Events: Event Handling Function

• The task of defining function for every event


attribute is cumbersome and requires a lot of
duplication of code.
• This issue can be addressed by using Event
Handling Functions, which specifies the function
name as the value for the event attribute in the
element.
• In the below demo, the above example is done
using Event handling function which is called when
the event occurs.
Example: Javascript Events: Using a Function to handle Events

• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Example: Javascript Event Handlers using a Function</title>
• <style type="text/css">
• p{font-family:Verdana;
• background:#FA8B7C;
• color:#fff;
• padding:10px; border:4px solid #555;}
• </style>
• <script>
• function mouseOverHandler(e){
• e.style.background = "#44c767";
• e.style.fontStyle="italic";
• }
•
• function mouseOutHandler(e){
• e.style.removeProperty('background');
• e.style.removeProperty('font-style');
• }
• </script>
• </head>
• <body>
• <p onmouseover="mouseOverHandler(this)" onmouseout="mouseOutHandler(this)">
• A system of morality which is based on relative
• emotional values is a mere illusion, a thoroughly vulgar
Javascript Mouse Events

• The most common group of event used on the


Web is the Mouse Events, as a mouse is the most
primary navigation device.
• There are in all nine mouse events defined in the
DOM Level 3 Events.
• All elements on a webpage support mouse
events, and when you cancel the default
behaviour of mouse event it affects other events
as well, as events are related amongst themselves.
Onmouseover and onmouseout example
• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Example: Using the type Property</title>
• <style type="text/css">
• p{font-family:Verdana;
• background:#FA8B7C;
• color:#fff;
• padding:10px; border:4px solid #555;}
• </style>

• </head>
• <body>
• <p>
• A system of morality which is based on relative
• emotional values is a mere illusion, a thoroughly vulgar
• conception which has nothing sound in it and nothing true.
• </p>
• <p id="content">We must let go of the life we have planned,
• so as to accept the one that is waiting for us.</p>
•
•
• <i>Hover over the text to see the effects.</i>
• </body>
•
• <script>
•
• var item = document.getElementsByTagName("p");
•
• for(var i=0; i < item.length; i++){
• item[i].onmouseover = mouseEventHandler;
• item[i].onmouseout = mouseEventHandler;
• }
•
• function mouseEventHandler(e){
• if(e.type == "mouseover"){
• e.target.style.background = "#44c767";
• e.target.style.fontStyle = "italic";
• }
• else {
• e.target.style.removeProperty('font-style');
• e.target.style.removeProperty('background');
• }
• }
• </script>
• </html>
Javascript Keyboard Events

• In the below demo, the script is used to display


key strokes entered within a pair of input
elements.
• The function String.fromCharCode is used to
convert the value of keyCode property into a
readable value.
• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Example: Working with form Events</title>
• <style type="text/css">
• p{font-family:Verdana;
• background:#FA8B7C;
• color:#fff;
• padding:10px; border:4px solid #555;}
• </style>

• </head>
• <body>
• <form>
• <p>
• <label for="name"> Name:
• <input autofocus id="name" name="name" /></label>
• </p>
• <p>
• <label for="nick"> Nickname:
• <input id="nick" name="nick" /></label>
• </p>
•
• <button type="submit">Submit</button>
• </form>
•
• <span id="output"></span>
•
• </body>
•
• <script>
• var items = document.getElementsByTagName("input");
• for (var i=0; i < items.length; i++){
• items[i].onkeyup = keyboardEventHandler;
• }
•
• function keyboardEventHandler(e){
• document.getElementById("output").innerHTML = "Key pressed is: " +
• e.keyCode + " Char:" + String.fromCharCode(e.keyCode);
• }
• </script>
• </html>
Javascript Window Events : onLoad and onUnLoad Event

• The event handler onload is invoked on the occurence


of a load event.
• A Load event occurs when the document, its frameset,
associated images have completed loading, including all
execution of all scripts and functions and available
forms.
• The untility of this event is that it helps in synchronizing
the frames, when large resources are to be loaded.
• The event handler onunload gets invoked when the
page is exited or reseted.
• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Example: Working with form Events</title>
• <style type="text/css">
• p{font-family:Verdana;
• background:#FA8B7C;
• color:#fff;
• padding:10px; border:4px solid #555;}
• </style>

• </head>
• <body>
• <form>
• <p>
• <label for="name"> Name:
• <input autofocus id="name" name="name" /></label>
• </p>
• <p>
• <label for="nick"> Nickname:
• <input id="nick" name="nick" /></label>
• </p>
•
• <button type="submit">Submit</button>
• </form>
•
• <span id="output"></span>
•
• </body>
•
• <script>
• var items = document.getElementsByTagName("input");
• for (var i=0; i < items.length; i++){
• items[i].onkeyup = keyboardEventHandler;
• }
•
• function keyboardEventHandler(e){
• document.getElementById("output").innerHTML = "Key pressed is: " +
• e.keyCode + " Char:" + String.fromCharCode(e.keyCode);
• }
• </script>
• </html>
Javascript Window Events : onfocus and onblur Event Handlers

• When an object on a webpage has the focus, its


waiting for some user activity such as click button,
link etc.
• The element over which the mouse cursor hovers
has the focus, when the cursor moves out the object
loses the focus.i.e blurred.
• The event handler onfocus is activated when the
window gains the focus while the event handler
onblur is activated when the window loses the
cursor focus
• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Javascript Window Event : onfocus and onblur</title>
• <style>
• p{
• font-family:Verdana;
• background:#FA8B7C;
• color:white;
• padding: 10px;
• margin: 10px;
• border: 5px solid #666;
• }
• </style>
• </head>
• <body>
• <form>
• <p>
• <label for="name">Name <input autofocus id="you" name="name"/></label>
• </p>
• <p>
• <label for="nick">Nick Name: <input id="nick" name="nick"/></label>
• </p>
• <button type="submit">Submit</button>
• <script>

• var item = document.getElementsByTagName("input");


• for (var i = 0; i < item.length; i++) {
• item[i].onfocus = focusEventHandler;
• item[i].onblur = focusEventHandler;
• }

• function focusEventHandler(e) {
• if (e.type == "focus") {
• e.target.style.backgroundColor = "#44c767";
• e.target.style.border = "3px solid #666";
• }
• else {
• e.target.style.removeProperty("background-color");
• e.target.style.removeProperty("border");
• }
• }
• </script>
• </body>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy