Jquery Event Type Focus Essay

HTML DOM Events

❮ PreviousNext ❯


HTML DOM Events

HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.

Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

Tip: The event model was standardized by the W3C in DOM Level 2.


HTML DOM Events

DOM: Indicates in which DOM Level the property was introduced.

Mouse Events

EventDescriptionDOM
onclickThe event occurs when the user clicks on an element2
oncontextmenuThe event occurs when the user right-clicks on an element to open a context menu3
ondblclickThe event occurs when the user double-clicks on an element2
onmousedownThe event occurs when the user presses a mouse button over an element2
onmouseenterThe event occurs when the pointer is moved onto an element2
onmouseleaveThe event occurs when the pointer is moved out of an element2
onmousemoveThe event occurs when the pointer is moving while it is over an element2
onmouseoverThe event occurs when the pointer is moved onto an element, or onto one of its children2
onmouseoutThe event occurs when a user moves the mouse pointer out of an element, or out of one of its children2
onmouseupThe event occurs when a user releases a mouse button over an element2

Keyboard Events

EventDescriptionDOM
onkeydownThe event occurs when the user is pressing a key2
onkeypressThe event occurs when the user presses a key2
onkeyupThe event occurs when the user releases a key2


Frame/Object Events

EventDescriptionDOM
onabortThe event occurs when the loading of a resource has been aborted2
onbeforeunloadThe event occurs before the document is about to be unloaded2
onerrorThe event occurs when an error occurs while loading an external file 2
onhashchangeThe event occurs when there has been changes to the anchor part of a URL3
onloadThe event occurs when an object has loaded2
onpageshowThe event occurs when the user navigates to a webpage3
onpagehideThe event occurs when the user navigates away from a webpage3
onresizeThe event occurs when the document view is resized2
onscrollThe event occurs when an element's scrollbar is being scrolled2
onunloadThe event occurs once a page has unloaded (for <body>)2

Form Events

EventDescriptionDOM
onblurThe event occurs when an element loses focus2
onchangeThe event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>)2
onfocusThe event occurs when an element gets focus2
onfocusinThe event occurs when an element is about to get focus2
onfocusoutThe event occurs when an element is about to lose focus2
oninputThe event occurs when an element gets user input3
oninvalidThe event occurs when an element is invalid3
onresetThe event occurs when a form is reset2
onsearchThe event occurs when the user writes something in a search field (for <input="search">)3
onselectThe event occurs after the user selects some text (for <input> and <textarea>)2
onsubmitThe event occurs when a form is submitted2

Drag Events

EventDescriptionDOM
ondragThe event occurs when an element is being dragged3
ondragendThe event occurs when the user has finished dragging an element3
ondragenterThe event occurs when the dragged element enters the drop target3
ondragleaveThe event occurs when the dragged element leaves the drop target3
ondragoverThe event occurs when the dragged element is over the drop target3
ondragstartThe event occurs when the user starts to drag an element3
ondropThe event occurs when the dragged element is dropped on the drop target3

Clipboard Events

EventDescriptionDOM
oncopyThe event occurs when the user copies the content of an element 
oncutThe event occurs when the user cuts the content of an element 
onpasteThe event occurs when the user pastes some content in an element 

Print Events

EventDescriptionDOM
onafterprintThe event occurs when a page has started printing, or if the print dialogue box has been closed3
onbeforeprintThe event occurs when a page is about to be printed3

Media Events

EventDescriptionDOM
onabortThe event occurs when the loading of a media is aborted3
oncanplayThe event occurs when the browser can start playing the media (when it has buffered enough to begin)3
oncanplaythroughThe event occurs when the browser can play through the media without stopping for buffering3
ondurationchangeThe event occurs when the duration of the media is changed3
onemptiedThe event occurs when something bad happens and the media file is suddenly unavailable (like unexpectedly disconnects)3
onendedThe event occurs when the media has reach the end (useful for messages like "thanks for listening")3
onerrorThe event occurs when an error occurred during the loading of a media file3
onloadeddataThe event occurs when media data is loaded3
onloadedmetadataThe event occurs when meta data (like dimensions and duration) are loaded3
onloadstartThe event occurs when the browser starts looking for the specified media3
onpauseThe event occurs when the media is paused either by the user or programmatically3
onplayThe event occurs when the media has been started or is no longer paused3
onplayingThe event occurs when the media is playing after having been paused or stopped for buffering3
onprogressThe event occurs when the browser is in the process of getting the media data (downloading the media)3
onratechangeThe event occurs when the playing speed of the media is changed3
onseekedThe event occurs when the user is finished moving/skipping to a new position in the media3
onseekingThe event occurs when the user starts moving/skipping to a new position in the media3
onstalledThe event occurs when the browser is trying to get media data, but data is not available3
onsuspendThe event occurs when the browser is intentionally not getting media data3
ontimeupdateThe event occurs when the playing position has changed (like when the user fast forwards to a different point in the media)3
onvolumechangeThe event occurs when the volume of the media has changed (includes setting the volume to "mute")3
onwaitingThe event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)3

Animation Events

EventDescriptionDOM
animationendThe event occurs when a CSS animation has completed3
animationiterationThe event occurs when a CSS animation is repeated3
animationstartThe event occurs when a CSS animation has started3

Transition Events

EventDescriptionDOM
transitionendThe event occurs when a CSS transition has completed3

Server-Sent Events

EventDescriptionDOM
onerrorThe event occurs when an error occurs with the event source 
onmessageThe event occurs when a message is received through the event source 
onopenThe event occurs when a connection with the event source is opened 

Misc Events

EventDescriptionDOM
onmessageThe event occurs when a message is received through or from an object (WebSocket, Web Worker, Event Source or a child frame or a parent window)3
onmousewheelDeprecated. Use the onwheel event instead 
ononlineThe event occurs when the browser starts to work online3
onofflineThe event occurs when the browser starts to work offline3
onpopstateThe event occurs when the window's history changes3
onshowThe event occurs when a <menu> element is shown as a context menu3
onstorageThe event occurs when a Web Storage area is updated3
ontoggleThe event occurs when the user opens or closes the <details> element3
onwheelThe event occurs when the mouse wheel rolls up or down over an element3

Touch Events

EventDescriptionDOM
ontouchcancelThe event occurs when the touch is interrupted 
ontouchendThe event occurs when a finger is removed from a touch screen 
ontouchmoveThe event occurs when a finger is dragged across the screen 
ontouchstartThe event occurs when a finger is placed on a touch screen 

Event Object

Constants

ConstantDescriptionDOM
CAPTURING_PHASEThe current event phase is the capture phase (1)1
AT_TARGETThe current event is in the target phase, i.e. it is being evaluated at the event target (2)2
BUBBLING_PHASEThe current event phase is the bubbling phase (3)3

Properties

PropertyDescriptionDOM
bubblesReturns whether or not a specific event is a bubbling event2
cancelableReturns whether or not an event can have its default action prevented2
currentTargetReturns the element whose event listeners triggered the event2
defaultPreventedReturns whether or not the preventDefault() method was called for the event3
eventPhaseReturns which phase of the event flow is currently being evaluated2
isTrustedReturns whether or not an event is trusted3
targetReturns the element that triggered the event2
timeStampReturns the time (in milliseconds relative to the epoch) at which the event was created2
typeReturns the name of the event2
viewReturns a reference to the Window object where the event occured2

Methods

MethodDescriptionDOM
preventDefault()Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur2
stopImmediatePropagation()Prevents other listeners of the same event from being called3
stopPropagation()Prevents further propagation of an event during event flow2

MouseEvent Object

PropertyDescriptionDOM
altKeyReturns whether the "ALT" key was pressed when the mouse event was triggered2
buttonReturns which mouse button was pressed when the mouse event was triggered2
buttonsReturns which mouse buttons were pressed when the mouse event was triggered3
clientXReturns the horizontal coordinate of the mouse pointer, relative to the current window, when the mouse event was triggered2
clientYReturns the vertical coordinate of the mouse pointer, relative to the current window, when the mouse event was triggered2
ctrlKeyReturns whether the "CTRL" key was pressed when the mouse event was triggered2
detailReturns a number that indicates how many times the mouse was clicked2
metaKeyReturns whether the "META" key was pressed when an event was triggered2
pageXReturns the horizontal coordinate of the mouse pointer, relative to the document, when the mouse event was triggered 
pageYReturns the vertical coordinate of the mouse pointer, relative to the document, when the mouse event was triggered 
relatedTargetReturns the element related to the element that triggered the mouse event2
screenXReturns the horizontal coordinate of the mouse pointer, relative to the screen, when an event was triggered2
screenYReturns the vertical coordinate of the mouse pointer, relative to the screen, when an event was triggered2
shiftKeyReturns whether the "SHIFT" key was pressed when an event was triggered2
whichReturns which mouse button was pressed when the mouse event was triggered2

KeyboardEvent Object

PropertyDescriptionDOM
altKeyReturns whether the "ALT" key was pressed when the key event was triggered2
ctrlKeyReturns whether the "CTRL" key was pressed when the key event was triggered2
charCodeReturns the Unicode character code of the key that triggered the onkeypress event2
keyReturns the key value of the key represented by the event3
keyCodeReturns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event2
locationReturns the location of a key on the keyboard or device3
metaKeyReturns whether the "meta" key was pressed when the key event was triggered2
shiftKeyReturns whether the "SHIFT" key was pressed when the key event was triggered2
whichReturns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event2

HashChangeEvent Object

PropertyDescriptionDOM
newURLReturns the URL of the document, after the hash has been changed
oldURLReturns the URL of the document, before the hash was changed

PageTransitionEvent Object

PropertyDescriptionDOM
persistedReturns whether the webpage was cached by the browser 

FocusEvent Object

PropertyDescriptionDOM
relatedTargetReturns the element related to the element that triggered the event3

AnimationEvent Object

PropertyDescriptionDOM
animationNameReturns the name of the animation
elapsedTimeReturns the number of seconds an animation has been running

TransitionEvent Object

PropertyDescriptionDOM
propertyNameReturns the name of the CSS property associated with the transition
elapsedTimeReturns the number of seconds a transition has been running

WheelEvent Object

PropertyDescriptionDOM
deltaXReturns the horizontal scroll amount of a mouse wheel (x-axis)3
deltaYReturns the vertical scroll amount of a mouse wheel (y-axis)3
deltaZReturns the scroll amount of a mouse wheel for the z-axis3
deltaModeReturns a number that represents the unit of measurements for delta values (pixels, lines or pages)3


❮ PreviousNext ❯

onfocusin Event

❮ Event Object

Example

Execute a JavaScript when an input field is about to get focus:

<input type="text" onfocusin="myFunction()">

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The onfocusin event occurs when an element is about to get focus.

Tip: The onfocusin event is similar to the onfocus event. The main difference is that the onfocus event does not bubble. Therefore, if you want to find out whether an element or its child gets the focus, you should use the onfocusin event.

Tip: Although Firefox does not support the onfocusin event, you can find out whether a child of an element gets the focus or not, by using a capturing listener for the onfocus event (using the optional useCapture parameter of the addEventListener() method).

Tip: The onfocusin event is the opposite of the onfocusout event.


Browser Support

The numbers in the table specify the first browser version that fully supports the event.

Event
onfocusinYesYes52.0YesYes

Note: The onfocusin event maynot work as expected in Chrome, Safari and Opera 15+ using the JavaScript HTML DOM syntax. However, it should work as an HTML attribute and by using the addEventListener() method (See syntax examples below).



Syntax

In JavaScript (may not work as expected in Chrome, Safari and Opera 15+):

objectmyScript};

Try it Yourself »

In JavaScript, using the addEventListener() method:

object.addEventListener("focusin", myScript);

Try it Yourself »

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.


Technical Details

Bubbles:Yes
Cancelable:No
Event type:FocusEvent
Supported HTML tags:ALL HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
DOM Version:Level 2 Events

More Examples

Example

Using "onfocusin" together with the "onfocusout" event:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Try it Yourself »

Example

Event delegation: setting the useCapture parameter of addEventListener() to true (for focus and blur):

<form id="myForm">
  <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";
}
</script>

Try it Yourself »

Example

Event delegation: using the focusin event:

<form id="myForm">
  <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);

function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";
}
</script>

Try it Yourself »

❮ Event Object

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *