Javascript Element - 89 Events (Reference)

https://webdevfix.com/89-element-events-in-javascript

Tech:

Javascript

Since:

1 year ago

Views:

In Javascript, HTML elements can be accessed by using various selectors. The selected element provides methods to access/modify the element's information.

Element Events:

beforeinput compositionend compositionstart compositionupdate

focusin focusout

fullscreenchange fullscreenerror

Element Events (aslo available in Window and Document):

load abort

scroll wheel

animationstart animationend animationiteration

transitioncancel transitionend transitionrun transitionstart

copy cut paste

drag dragstart dragend dragenter dragleave dragover drop

keydown keyup

gotpointercapture lostpointercapture pointercancel pointerdown pointerup pointerenter pointerleave pointermove pointerout pointerover

touchcancel touchend touchmove touchstart

blur focus

click dblclick change input auxclick contextmenu

mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup

select selectstart selectionchange

reset invalid submit

error cancel

pause play playing resize seeked seeking ratechanged volumechange ended stalled suspend waiting

loadstart durationchange loadedmetadata loadeddata progress canplay canplaythrough timeupdate emptied

beforeinput

The beforeinput event is fired when the user is about to insert text into the text field.

element.addEventListener('beforeinput', fn_name(e));

element.onbeforeinput = function(){ // code )};

<body onbeforeinput="code">

compositionend

The compositionend event is fired when the user has finished composing text.

element.addEventListener('compositionend', fn_name(e));

el.oncompositionend = function(){ // code )};

<body oncompositionend="code">

compositionstart

The compositionstart event is fired when the user starts to compose text.

element.addEventListener('compositionstart', fn_name(e));

el.oncompositionstart = function(){ // code )};

<body oncompositionstart="code">

compositionupdate

The compositionupdate event is fired when the user is in the middle of composing text.

element.addEventListener('compositionupdate', fn_name(e));

el.oncompositionupdate = function(){ // code )};

<body oncompositionupdate="code">

focusin

The focusin event is fired when the element receives focus.

element.addEventListener('focusin', fn_name(e));

el.onfocusin = function(){ // code )};

<body onfocusin="code">

focusout

The focusout event is fired when the element loses focus.

element.addEventListener('focusout', fn_name(e));

el.onfocusout = function(){ // code )};

<body onfocusout="code">

fullscreenchange

The fullscreenchange event is fired when the element is about to change from being in full-screen mode to being in normal mode.

element.addEventListener('fullscreenchange', fn_name(e));

element.onfullscreenchange = function(){ // code )};

<body fullscreenchange="code">

fullscreenerror

The fullscreenerror event is fired when the element is about to change from being in full-screen mode to being in normal mode.

element.addEventListener('fullscreenerror', fn_name(e));

element.onfullscreenerror = function(){ // code )};

<body onfullscreenerror="code">

Common events

Document Events which also available in Window and Element are listed here.

Javascript Number - 10 Methods and 5 Properties (Reference)

2 years ago

Javascript Statements - 16 Statements (Reference)

2 years ago

Javascript matchMedia - 2 Methods and 2 Properties (Reference)

2 years ago

Javascript Object - 21 Methods (Reference)

1 year ago

Javascript Document - 24 Methods (Reference)

1 year ago