Downloaded 92 times
![12Focus & Blur Event Example:<!DOCTYPE html><html><head><title>Demo</title></head><body><h1>Hello How Are You...?</h1><form>Click This Button<br/><input type="button" value="Click Me!" onclick="myFun()"/><br/><input type="text" id="username" onfocus="this.blur()"/><br/></form><script type="text/javascript">function myFun(){document.getElementById("username").value="Dhruv";}</script></body></html>[fig.1 Before Click On That Button][fig.2 After Click On That Button]](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjseventwtppt-190418174721%2f75%2fEvent-In-JavaScript-12-2048.jpg&f=jpg&w=240)
![14Syntaxtarget.addEventListener(type, listener[, options]);target.addEventListener(type, listener[, useCapture]);target.addEventListener(type, listener[, useCapture, wantsUntrusted ]);document.getElementById("myBtn").addEventListener("click", displayDate);](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjseventwtppt-190418174721%2f75%2fEvent-In-JavaScript-14-2048.jpg&f=jpg&w=240)
![16Syntaxtarget.removeEventListener(type, listener[, options]);target.removeEventListener(type, listener[, useCapture]);](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjseventwtppt-190418174721%2f75%2fEvent-In-JavaScript-16-2048.jpg&f=jpg&w=240)
![18Output[fig.3 Initial Page] [fig.4 When Click On Change Or Display][fig.5 When Click On Hide] [fig.6 When Click On Color Change]](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjseventwtppt-190418174721%2f75%2fEvent-In-JavaScript-18-2048.jpg&f=jpg&w=240)
Uploaded byShahDhruv21
PPTX, PDF6,191 views
Event In JavaScript
This document discusses JavaScript events and event listeners. It begins with an introduction that defines events as notifications that specific actions occurred, like user or browser actions. Event handlers are scripts that are executed in response to events. Events can be used to trigger JavaScript code that responds to user interactions. The document then provides examples of common event types like onclick, onsubmit, onmouseover, onmouseout, focus, and blur. It also discusses how to add and remove event listeners using addEventListener() and removeEventListener() methods. The document concludes with an example demonstrating how events can be used to change an HTML element in response to user clicks.
More Related Content
What's hot
Similar to Event In JavaScript
More from ShahDhruv21
Recently uploaded
Event In JavaScript
- 1.JAVA SCRIPT EVENTSAND EVENT LISTENERSA. D. PATEL INSTITUTE OF TECHNOLOGYWEB TECHNOLOGY(2160708) : A.Y. 2018-19GUIDED BY:PROF. HEMANSHU A. PATEL(DEPT OF IT, ADIT)PREPARED BY:KUNAL KATHEE.R.NO.:160010116021SHAH DHRUVE.R NO.:160010116053CHINTAN SUDANIE.R.NO.:160010116056PATEL RUSHILE.R.NO.:170014116001B.E. (IT) SEM - VIDEPARTMENT OF INFORMATION TECHNOLOGYA D PATEL INSTITUTE OF TECHNOLOGY (ADIT)NEW VALLABH VIDYANAGAR, ANAND, GUJARAT
- 2.2Introduction• Event-driven: codeexecuted resulting to user or browser action.• Event: a notification that something specific occurred -- by browser or user.• Event handler: a script implicitly executed in response to event occurrence.• Registration: the process of connecting event handler to event.• Events are JavaScript objects --> names are case sensitive, all use lowercase only.(Method write should never be used in event handler. May cause document to be writtenover.)• JavaScript events associated with HTML tag attributes which can be used to connect toevent-handlers
- 3.3• JavaScript's interactionwith HTML is handled through events that occur when the user orthe browser manipulates a page.• When the page loads, it is called an event. When the user clicks a button, that click too is anevent,Other examples include events like pressing any key, closing a window, resizing awindow, etc.• Developers can use these events to execute JavaScript coded responses, which cause buttonsto close windows, messages to be displayed to users, data to be validated, and virtually anyother type of response imaginable.• Events are a part of the Document Object Model DOM Level 3 and every HTML elementcontains a set of events which can trigger JavaScript Code.
- 4.4onclick Event Type•This is the most frequently used event type which occurs when a user clicks the left button ofhis mouse. You can put your validation, warning etc., against this event type.• One attribute can appear in several different tags:e.g. onClick can be in <a> and <input>• HTML element get focus:1. When user puts mouse cursor over it and presses the left button2. When user tabs to the element3. By executing the focus method4. Element get blurred when another element gets focus
- 5.5• Event handlerscan be specified two ways1. Assigning the event handler script to an event tag attributeonClick = "alert('Mouse click!');"onClick = "myHandler();2. Assigning them to properties of JavaScript object associated with HTML elements.• The load event: the completion of loading of a document by browser• The onload attribute of <body> used to specify event handler:• The unload event: used to clean up things before a document is unloaded.
- 6.6Example:<!DOCTYPE html><html><head><script type="text/javascript"></script></head><body><p>Clickthe following button and see result</p><form><input type="button" onclick="sayHello()" value="Say Hello" /></form></body></html>
- 7.7onSubmit Event Type•onSubmit is an event that occurs when you try to submit a form. You can put your formvalidation against this event type.• The following Next slide shows how to use onsubmit. Here we are calling a validatefunction before submitting a form data to the webserver. If validate function returns true, theform will be submitted, otherwise it will not submit the data.
- 8.8Example:<!DOCTYPE html><html><head><script type="text/javascript"></script></head><body><formmethod="POST" action="target.html" onsubmit="return validate()">.......<input type="submit" value="Submit" /></form></body></html>
- 9.9onmouseover and onmouseout•These two event types will help you create nice effects with images or even with text aswell.• The onmouseover event triggers when you bring your mouse over any element and theonmouseout triggers when you move your mouse out from that element.• Try the following example.
- 10.10Example:<!DOCTYPE html><html><head><script type="text/javascript"></script></head><body><p>Bringyour mouse inside the division to see the result:</p><div onmouseover="over()" onmouseout="out()"><h2> This is inside the division </h2></div></body></html>
- 11.
- 12.12Focus & BlurEvent Example:<!DOCTYPE html><html><head><title>Demo</title></head><body><h1>Hello How Are You...?</h1><form>Click This Button<br/><input type="button" value="Click Me!" onclick="myFun()"/><br/><input type="text" id="username" onfocus="this.blur()"/><br/></form><script type="text/javascript">function myFun(){document.getElementById("username").value="Dhruv";}</script></body></html>[fig.1 Before Click On That Button][fig.2 After Click On That Button]
- 13.13addEventListener• The EventTarget method addEventListener() sets up a function that will be calledwhenever the specified event is delivered to the target.• Common targets are Element, Document, and Window, but the target may be any object thatsupports events (such as XML Http Request).• addEventListener() works by adding a function or an object that implements Event Listenerto the list of event listeners for the specified event type on the Event Target on which it'scalled.
- 14.14Syntaxtarget.addEventListener(type, listener[, options]);target.addEventListener(type,listener[, useCapture]);target.addEventListener(type, listener[, useCapture, wantsUntrusted ]);document.getElementById("myBtn").addEventListener("click", displayDate);
- 15.15removeEventListener• The EventTarget.removeEventListener()method removes from the EventTarget an eventlistener previously registered with EventTarget.addEventListener().• The event listener to be removed is identified using a combination of the event type, theevent listener function itself, and various optional options that may affect the matchingprocess; see Matching event listeners for removal.
- 16.16Syntaxtarget.removeEventListener(type, listener[, options]);target.removeEventListener(type,listener[, useCapture]);
- 17.17Other Example OfEvents<!DOCTYPE html><html><head><title>Display Page</title></head><body><hr color="orange" /><center><h1 id="htag">Welcome To ADIT</h1></center><hr color="blue" /><center><button type="button" onclick="Change()">Change</button><button type="button" onclick="Hide()">Hide</button><button type="button" onclick="Display()">Display</button><button type="button" onclick="ChangeColor()">Color Change</button></center><hr color="green" /><script type="text/javascript">function Change(){ document.getElementById("htag").innerHTML="Welcome ABC"; }function Display(){ document.getElementById("htag").style.display="block"; }function Hide(){ document.getElementById("htag").style.display="none"; }function ChangeColor(){ document.getElementById("htag").style.color="blue"; }</script></body></html>
- 18.18Output[fig.3 Initial Page][fig.4 When Click On Change Or Display][fig.5 When Click On Hide] [fig.6 When Click On Color Change]
- 19.