Javascript Common Events - 81 Events which are common for Document, Window and Element (Reference)

https://webdevfix.com/81-events-that-are-common-for-document-window-and-element-in-javascript

Tech:

Javascript

Since:

1 year ago

Views:

In Javascript, there are many events which are common for Document, Window and Element. Here is the list 81 common events.

Document, Window and Element Events:

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

load

The load event is fired when the browser is finished loading the document.

// Document
document.addEventListener('load', functionName(e));
document.load = function(){ };

// Window
window.addEventListener('load', functionName(e));
window.load = function(){ };

// Element
document.getElementById('id').addEventListener('load', functionName(e));
document.getElementById('id').load = function(){ };
<body load="functionName">

abort

The abort event is fired when the loading of a resource has been aborted.

// Document
document.addEventListener('abort', functionName(e));
document.abort = function(){ };

// Window
window.addEventListener('abort', functionName(e));
window.abort = function(){ };

// Element
document.getElementById('id').addEventListener('abort', functionName(e));
document.getElementById('id').abort = function(){ };
<body abort="functionName">

scroll

The scroll event is fired when the document is scrolled.

// Document
document.addEventListener('scroll', functionName(e));
document.scroll = function(){ };

// Window
window.addEventListener('scroll', functionName(e));
window.scroll = function(){ };

// Element
document.getElementById('id').addEventListener('scroll', functionName(e));
document.getElementById('id').scroll = function(){ };
<body scroll="functionName">

wheel

The wheel event is fired when the mouse wheel is rotated.

// Document
document.addEventListener('wheel', functionName(e));
document.wheel = function(){ };

// Window
window.addEventListener('wheel', functionName(e));
window.wheel = function(){ };

// Element
document.getElementById('id').addEventListener('wheel', functionName(e));
document.getElementById('id').wheel = function(){ };
<body wheel="functionName">

animationstart

The animationstart event is fired when the animation is started.

// Document
document.addEventListener('animationstart', functionName(e));
document.animationstart = function(){ };

// Window
window.addEventListener('animationstart', functionName(e));
window.animationstart = function(){ };

// Element
document.getElementById('id').addEventListener('animationstart', functionName(e));
document.getElementById('id').animationstart = function(){ };
<body animationstart="functionName">

animationend

The animationend event is fired when the animation is ended.

// Document
document.addEventListener('animationend', functionName(e));
document.animationend = function(){ };

// Window
window.addEventListener('animationend', functionName(e));
window.animationend = function(){ };

// Element
document.getElementById('id').addEventListener('animationend', functionName(e));
document.getElementById('id').animationend = function(){ };
<body animationend="functionName">

animationiteration

The animationiteration event is fired when the animation is repeated.

// Document
document.addEventListener('animationiteration', functionName(e));
document.animationiteration = function(){ };

// Window
window.addEventListener('animationiteration', functionName(e));
window.animationiteration = function(){ };

// Element
document.getElementById('id').addEventListener('animationiteration', functionName(e));
document.getElementById('id').animationiteration = function(){ };
<body animationiteration="functionName">

transitioncancel

The transitioncancel event is fired when the transition is canceled.

// Document
document.addEventListener('transitioncancel', functionName(e));
document.transitioncancel = function(){ };

// Window
window.addEventListener('transitioncancel', functionName(e));
window.transitioncancel = function(){ };

// Element
document.getElementById('id').addEventListener('transitioncancel', functionName(e));
document.getElementById('id').transitioncancel = function(){ };
<body transitioncancel="functionName">

transitionend

The transitionend event is fired when the transition is finished.

// Document
document.addEventListener('transitionend', functionName(e));
document.transitionend = function(){ };

// Window
window.addEventListener('transitionend', functionName(e));
window.transitionend = function(){ };

// Element
document.getElementById('id').addEventListener('transitionend', functionName(e));
document.getElementById('id').transitionend = function(){ };
<body transitionend="functionName">

transitionrun

The transitionrun event is fired when the transition is started.

// Document
document.addEventListener('transitionrun', functionName(e));
document.transitionrun = function(){ };

// Window
window.addEventListener('transitionrun', functionName(e));
window.transitionrun = function(){ };

// Element
document.getElementById('id').addEventListener('transitionrun', functionName(e));
document.getElementById('id').transitionrun = function(){ };
<body transitionrun="functionName">

transitionstart

The transitionstart event is fired when the transition is started.

// Document
document.addEventListener('transitionstart', functionName(e));
document.transitionstart = function(){ };

// Window
window.addEventListener('transitionstart', functionName(e));
window.transitionstart = function(){ };

// Element
document.getElementById('id').addEventListener('transitionstart', functionName(e));
document.getElementById('id').transitionstart = function(){ };
<body transitionstart="functionName">

copy

The copy event is fired when the content of the selection has been copied to the clipboard.

// Document
document.addEventListener('copy', functionName(e));
document.copy = function(){ };

// Window
window.addEventListener('copy', functionName(e));
window.copy = function(){ };

// Element
document.getElementById('id').addEventListener('copy', functionName(e));
document.getElementById('id').copy = function(){ };
<body copy="functionName">

cut

The cut event is fired when the content of the selection has been cut to the clipboard.

// Document
document.addEventListener('cut', functionName(e));
document.cut = function(){ };

// Window
window.addEventListener('cut', functionName(e));
window.cut = function(){ };

// Element
document.getElementById('id').addEventListener('cut', functionName(e));
document.getElementById('id').cut = function(){ };
<body cut="functionName">

paste

The paste event is fired when the content of the clipboard has been pasted.

// Document
document.addEventListener('paste', functionName(e));
document.paste = function(){ };

// Window
window.addEventListener('paste', functionName(e));
window.paste = function(){ };

// Element
document.getElementById('id').addEventListener('paste', functionName(e));
document.getElementById('id').paste = function(){ };
<body paste="functionName">

drag

The drag event is fired when the user starts dragging an element or text selection.

// Document
document.addEventListener('drag', functionName(e));
document.drag = function(){ };

// Window
window.addEventListener('drag', functionName(e));
window.drag = function(){ };

// Element
document.getElementById('id').addEventListener('drag', functionName(e));
document.getElementById('id').drag = function(){ };
<body drag="functionName">

dragstart

The dragstart event is fired when the user starts dragging an element or text selection.

// Document
document.addEventListener('dragstart', functionName(e));
document.dragstart = function(){ };

// Window
window.addEventListener('dragstart', functionName(e));
window.dragstart = function(){ };

// Element
document.getElementById('id').addEventListener('dragstart', functionName(e));
document.getElementById('id').dragstart = function(){ };
<body dragstart="functionName">

dragend

The dragend event is fired when the user stops dragging an element or text selection.

// Document
document.addEventListener('dragend', functionName(e));
document.dragend = function(){ };

// Window
window.addEventListener('dragend', functionName(e));
window.dragend = function(){ };

// Element
document.getElementById('id').addEventListener('dragend', functionName(e));
document.getElementById('id').dragend = function(){ };
<body dragend="functionName">

dragenter

The dragenter event is fired when an element or text selection is being dragged over another.

// Document
document.addEventListener('dragenter', functionName(e));
document.dragenter = function(){ };

// Window
window.addEventListener('dragenter', functionName(e));
window.dragenter = function(){ };

// Element
document.getElementById('id').addEventListener('dragenter', functionName(e));
document.getElementById('id').dragenter = function(){ };
<body dragenter="functionName">

dragleave

The dragleave event is fired when an element or text selection leaves a valid drop target.

// Document
document.addEventListener('dragleave', functionName(e));
document.dragleave = function(){ };

// Window
window.addEventListener('dragleave', functionName(e));
window.dragleave = function(){ };

// Element
document.getElementById('id').addEventListener('dragleave', functionName(e));
document.getElementById('id').dragleave = function(){ };
<body dragleave="functionName">

dragover

The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).

// Document
document.addEventListener('dragover', functionName(e));
document.dragover = function(){ };

// Window
window.addEventListener('dragover', functionName(e));
window.dragover = function(){ };

// Element
document.getElementById('id').addEventListener('dragover', functionName(e));
document.getElementById('id').dragover = function(){ };
<body dragover="functionName">

drop

The drop event is fired when an element or text selection is dropped on a valid drop target.

// Document
document.addEventListener('drop', functionName(e));
document.drop = function(){ };

// Window
window.addEventListener('drop', functionName(e));
window.drop = function(){ };

// Element
document.getElementById('id').addEventListener('drop', functionName(e));
document.getElementById('id').drop = function(){ };
<body drop="functionName">

keydown

The keydown event is fired when the user presses a key.

// Document
document.addEventListener('keydown', functionName(e));
document.keydown = function(){ };

// Window
window.addEventListener('keydown', functionName(e));
window.keydown = function(){ };

// Element
document.getElementById('id').addEventListener('keydown', functionName(e));
document.getElementById('id').keydown = function(){ };
<body keydown="functionName">

keyup

The keyup event is fired when the user releases a key.

// Document
document.addEventListener('keyup', functionName(e));
document.keyup = function(){ };

// Window
window.addEventListener('keyup', functionName(e));
window.keyup = function(){ };

// Element
document.getElementById('id').addEventListener('keyup', functionName(e));
document.getElementById('id').keyup = function(){ };
<body keyup="functionName">

gotpointercapture

The gotpointercapture event is fired when a pointing device is moved onto the element that has captured it.

// Document
document.addEventListener('gotpointercapture', functionName(e));
document.gotpointercapture = function(){ };

// Window
window.addEventListener('gotpointercapture', functionName(e));
window.gotpointercapture = function(){ };

// Element
document.getElementById('id').addEventListener('gotpointercapture', functionName(e));
document.getElementById('id').gotpointercapture = function(){ };
<body gotpointercapture="functionName">

lostpointercapture

The lostpointercapture event is fired when a pointing device is moved off the element that has captured it.

// Document
document.addEventListener('lostpointercapture', functionName(e));
document.lostpointercapture = function(){ };

// Window
window.addEventListener('lostpointercapture', functionName(e));
window.lostpointercapture = function(){ };

// Element
document.getElementById('id').addEventListener('lostpointercapture', functionName(e));
document.getElementById('id').lostpointercapture = function(){ };
<body lostpointercapture="functionName">

pointercancel

The pointercancel event is fired when a pointing device is no longer over an element or text selection.

// Document
document.addEventListener('pointercancel', functionName(e));
document.pointercancel = function(){ };

// Window
window.addEventListener('pointercancel', functionName(e));
window.pointercancel = function(){ };

// Element
document.getElementById('id').addEventListener('pointercancel', functionName(e));
document.getElementById('id').pointercancel = function(){ };
<body pointercancel="functionName">

pointerdown

The pointerdown event is fired when a pointing device is pressed over an element.

// Document
document.addEventListener('pointerdown', functionName(e));
document.pointerdown = function(){ };

// Window
window.addEventListener('pointerdown', functionName(e));
window.pointerdown = function(){ };

// Element
document.getElementById('id').addEventListener('pointerdown', functionName(e));
document.getElementById('id').pointerdown = function(){ };
<body pointerdown="functionName">

pointerup

The pointerup event is fired when a pointing device is released over an element.

// Document
document.addEventListener('pointerup', functionName(e));
document.pointerup = function(){ };

// Window
window.addEventListener('pointerup', functionName(e));
window.pointerup = function(){ };

// Element
document.getElementById('id').addEventListener('pointerup', functionName(e));
document.getElementById('id').pointerup = function(){ };
<body pointerup="functionName">

pointerenter

The pointerenter event is fired when a pointing device is moved onto the element that has the listener attached.

// Document
document.addEventListener('pointerenter', functionName(e));
document.pointerenter = function(){ };

// Window
window.addEventListener('pointerenter', functionName(e));
window.pointerenter = function(){ };

// Element
document.getElementById('id').addEventListener('pointerenter', functionName(e));
document.getElementById('id').pointerenter = function(){ };
<body pointerenter="functionName">

pointerleave

The pointerleave event is fired when a pointing device is moved off the element that has the listener attached.

// Document
document.addEventListener('pointerleave', functionName(e));
document.pointerleave = function(){ };

// Window
window.addEventListener('pointerleave', functionName(e));
window.pointerleave = function(){ };

// Element
document.getElementById('id').addEventListener('pointerleave', functionName(e));
document.getElementById('id').pointerleave = function(){ };
<body pointerleave="functionName">

pointermove

The pointermove event is fired when a pointing device is moved over an element.

// Document
document.addEventListener('pointermove', functionName(e));
document.pointermove = function(){ };

// Window
window.addEventListener('pointermove', functionName(e));
window.pointermove = function(){ };

// Element
document.getElementById('id').addEventListener('pointermove', functionName(e));
document.getElementById('id').pointermove = function(){ };
<body pointermove="functionName">

pointerout

The pointerout event is fired when a pointing device is moved off the element that has the listener attached.

// Document
document.addEventListener('pointerout', functionName(e));
document.pointerout = function(){ };

// Window
window.addEventListener('pointerout', functionName(e));
window.pointerout = function(){ };

// Element
document.getElementById('id').addEventListener('pointerout', functionName(e));
document.getElementById('id').pointerout = function(){ };
<body pointerout="functionName">

pointerover

The pointerover event is fired when a pointing device is moved over an element.

// Document
document.addEventListener('pointerover', functionName(e));
document.pointerover = function(){ };

// Window
window.addEventListener('pointerover', functionName(e));
window.pointerover = function(){ };

// Element
document.getElementById('id').addEventListener('pointerover', functionName(e));
document.getElementById('id').pointerover = function(){ };
<body pointerover="functionName">

touchcancel

The touchcancel event is fired when a touch point has been disrupted in an implementation-specific manners (too many touch points for example).

// Document
document.addEventListener('touchcancel', functionName(e));
document.touchcancel = function(){ };

// Window
window.addEventListener('touchcancel', functionName(e));
window.touchcancel = function(){ };

// Element
document.getElementById('id').addEventListener('touchcancel', functionName(e));
document.getElementById('id').touchcancel = function(){ };
<body touchcancel="functionName">

touchend

The touchend event is fired when a touch point is removed from the touch surface.

// Document
document.addEventListener('touchend', functionName(e));
document.touchend = function(){ };

// Window
window.addEventListener('touchend', functionName(e));
window.touchend = function(){ };

// Element
document.getElementById('id').addEventListener('touchend', functionName(e));
document.getElementById('id').touchend = function(){ };
<body touchend="functionName">

touchmove

The touchmove event is fired when a touch point is moved along the touch surface.

// Document
document.addEventListener('touchmove', functionName(e));
document.touchmove = function(){ };

// Window
window.addEventListener('touchmove', functionName(e));
window.touchmove = function(){ };

// Element
document.getElementById('id').addEventListener('touchmove', functionName(e));
document.getElementById('id').touchmove = function(){ };
<body touchmove="functionName">

touchstart

The touchstart event is fired when a touch point is placed on the touch surface.

// Document
document.addEventListener('touchstart', functionName(e));
document.touchstart = function(){ };

// Window
window.addEventListener('touchstart', functionName(e));
window.touchstart = function(){ };

// Element
document.getElementById('id').addEventListener('touchstart', functionName(e));
document.getElementById('id').touchstart = function(){ };
<body touchstart="functionName">

blur

The blur event is fired when an element has lost focus.

// Document
document.addEventListener('blur', functionName(e));
document.blur = function(){ };

// Window
window.addEventListener('blur', functionName(e));
window.blur = function(){ };

// Element
document.getElementById('id').addEventListener('blur', functionName(e));
document.getElementById('id').blur = function(){ };
<body blur="functionName">

focus

The focus event is fired when an element receives focus.

// Document
document.addEventListener('focus', functionName(e));
document.focus = function(){ };

// Window
window.addEventListener('focus', functionName(e));
window.focus = function(){ };

// Element
document.getElementById('id').addEventListener('focus', functionName(e));
document.getElementById('id').focus = function(){ };
<body focus="functionName">

click

The click event is fired when a pointing device button is clicked over an element.

// Document
document.addEventListener('click', functionName(e));
document.click = function(){ };

// Window
window.addEventListener('click', functionName(e));
window.click = function(){ };

// Element
document.getElementById('id').addEventListener('click', functionName(e));
document.getElementById('id').click = function(){ };
<body click="functionName">

dblclick

The dblclick event is fired when a pointing device button is double clicked over an element.

// Document
document.addEventListener('dblclick', functionName(e));
document.dblclick = function(){ };

// Window
window.addEventListener('dblclick', functionName(e));
window.dblclick = function(){ };

// Element
document.getElementById('id').addEventListener('dblclick', functionName(e));
document.getElementById('id').dblclick = function(){ };
<body dblclick="functionName">

change

The change event is fired when a control loses the input focus and its value has been modified since gaining focus.

// Document
document.addEventListener('change', functionName(e));
document.change = function(){ };

// Window
window.addEventListener('change', functionName(e));
window.change = function(){ };

// Element
document.getElementById('id').addEventListener('change', functionName(e));
document.getElementById('id').change = function(){ };
<body change="functionName">

input

The input event is fired when the value of an element is changed.

// Document
document.addEventListener('input', functionName(e));
document.input = function(){ };

// Window
window.addEventListener('input', functionName(e));
window.input = function(){ };

// Element
document.getElementById('id').addEventListener('input', functionName(e));
document.getElementById('id').input = function(){ };
<body input="functionName">

auxclick

The auxclick event is fired when a pointing device button is clicked over an element.

// Document
document.addEventListener('auxclick', functionName(e));
document.auxclick = function(){ };

// Window
window.addEventListener('auxclick', functionName(e));
window.auxclick = function(){ };

// Element
document.getElementById('id').addEventListener('auxclick', functionName(e));
document.getElementById('id').auxclick = function(){ };
<body auxclick="functionName">

contextmenu

The contextmenu event is fired when the right button of the mouse is clicked over an element.

// Document
document.addEventListener('contextmenu', functionName(e));
document.contextmenu = function(){ };

// Window
window.addEventListener('contextmenu', functionName(e));
window.contextmenu = function(){ };

// Element
document.getElementById('id').addEventListener('contextmenu', functionName(e));
document.getElementById('id').contextmenu = function(){ };
<body contextmenu="functionName">

mousedown

The mousedown event is fired when a pointing device button is pressed over an element.

// Document
document.addEventListener('mousedown', functionName(e));
document.mousedown = function(){ };

// Window
window.addEventListener('mousedown', functionName(e));
window.mousedown = function(){ };

// Element
document.getElementById('id').addEventListener('mousedown', functionName(e));
document.getElementById('id').mousedown = function(){ };
<body mousedown="functionName">

mouseenter

The mouseenter event is fired when a pointing device is moved onto the element that has the listener attached.

// Document
document.addEventListener('mouseenter', functionName(e));
document.mouseenter = function(){ };

// Window
window.addEventListener('mouseenter', functionName(e));
window.mouseenter = function(){ };

// Element
document.getElementById('id').addEventListener('mouseenter', functionName(e));
document.getElementById('id').mouseenter = function(){ };
<body mouseenter="functionName">

mouseleave

The mouseleave event is fired when a pointing device is moved off the element that has the listener attached.

// Document
document.addEventListener('mouseleave', functionName(e));
document.mouseleave = function(){ };

// Window
window.addEventListener('mouseleave', functionName(e));
window.mouseleave = function(){ };

// Element
document.getElementById('id').addEventListener('mouseleave', functionName(e));
document.getElementById('id').mouseleave = function(){ };
<body mouseleave="functionName">

mousemove

The mousemove event is fired when a pointing device is moved over an element.

// Document
document.addEventListener('mousemove', functionName(e));
document.mousemove = function(){ };

// Window
window.addEventListener('mousemove', functionName(e));
window.mousemove = function(){ };

// Element
document.getElementById('id').addEventListener('mousemove', functionName(e));
document.getElementById('id').mousemove = function(){ };
<body mousemove="functionName">

mouseout

The mouseout event is fired when a pointing device is moved off the element that has the listener attached.

// Document
document.addEventListener('mouseout', functionName(e));
document.mouseout = function(){ };

// Window
window.addEventListener('mouseout', functionName(e));
window.mouseout = function(){ };

// Element
document.getElementById('id').addEventListener('mouseout', functionName(e));
document.getElementById('id').mouseout = function(){ };
<body mouseout="functionName">

mouseover

The mouseover event is fired when a pointing device is moved onto the element that has the listener attached.

// Document
document.addEventListener('mouseover', functionName(e));
document.mouseover = function(){ };

// Window
window.addEventListener('mouseover', functionName(e));
window.mouseover = function(){ };

// Element
document.getElementById('id').addEventListener('mouseover', functionName(e));
document.getElementById('id').mouseover = function(){ };
<body mouseover="functionName">

mouseup

The mouseup event is fired when a pointing device button is released over an element.

// Document
document.addEventListener('mouseup', functionName(e));
document.mouseup = function(){ };

// Window
window.addEventListener('mouseup', functionName(e));
window.mouseup = function(){ };

// Element
document.getElementById('id').addEventListener('mouseup', functionName(e));
document.getElementById('id').mouseup = function(){ };
<body mouseup="functionName">

select

The select event is fired when a user selects some text in a text field.

// Document
document.addEventListener('select', functionName(e));
document.select = function(){ };

// Window
window.addEventListener('select', functionName(e));
window.select = function(){ };

// Element
document.getElementById('id').addEventListener('select', functionName(e));
document.getElementById('id').select = function(){ };
<body select="functionName">

selectstart

The selectstart event is fired when a user is about to select text in a text field.

// Document
document.addEventListener('selectstart', functionName(e));
document.selectstart = function(){ };

// Window
window.addEventListener('selectstart', functionName(e));
window.selectstart = function(){ };

// Element
document.getElementById('id').addEventListener('selectstart', functionName(e));
document.getElementById('id').selectstart = function(){ };
<body selectstart="functionName">

selectionchange

The selectionchange event is fired when the selection of a text field changes.

// Document
document.addEventListener('selectionchange', functionName(e));
document.selectionchange = function(){ };

// Window
window.addEventListener('selectionchange', functionName(e));
window.selectionchange = function(){ };

// Element
document.getElementById('id').addEventListener('selectionchange', functionName(e));
document.getElementById('id').selectionchange = function(){ };
<body selectionchange="functionName">

reset

The reset event is fired when a form is reset.

// Document
document.addEventListener('reset', functionName(e));
document.reset = function(){ };

// Window
window.addEventListener('reset', functionName(e));
window.reset = function(){ };

// Element
document.getElementById('id').addEventListener('reset', functionName(e));
document.getElementById('id').reset = function(){ };
<body reset="functionName">

invalid

The invalid event is fired when a form is invalid.

// Document
document.addEventListener('invalid', functionName(e));
document.invalid = function(){ };

// Window
window.addEventListener('invalid', functionName(e));
window.invalid = function(){ };

// Element
document.getElementById('id').addEventListener('invalid', functionName(e));
document.getElementById('id').invalid = function(){ };
<body invalid="functionName">

submit

The submit event is fired when a form is submitted.

// Document
document.addEventListener('submit', functionName(e));
document.submit = function(){ };

// Window
window.addEventListener('submit', functionName(e));
window.submit = function(){ };

// Element
document.getElementById('id').addEventListener('submit', functionName(e));
document.getElementById('id').submit = function(){ };
<body submit="functionName">

error

The error event is fired when an error occurs.

// Document
document.addEventListener('error', functionName(e));
document.error = function(){ };

// Window
window.addEventListener('error', functionName(e));
window.error = function(){ };

// Element
document.getElementById('id').addEventListener('error', functionName(e));
document.getElementById('id').error = function(){ };
<body error="functionName">

cancel

The cancel event is fired when a request has been canceled.

// Document
document.addEventListener('cancel', functionName(e));
document.cancel = function(){ };

// Window
window.addEventListener('cancel', functionName(e));
window.cancel = function(){ };

// Element
document.getElementById('id').addEventListener('cancel', functionName(e));
document.getElementById('id').cancel = function(){ };
<body cancel="functionName">

pause

The pause event is fired when the user pauses a video or audio stream.

// Document
document.addEventListener('pause', functionName(e));
document.pause = function(){ };

// Window
window.addEventListener('pause', functionName(e));
window.pause = function(){ };

// Element
document.getElementById('id').addEventListener('pause', functionName(e));
document.getElementById('id').pause = function(){ };
<body pause="functionName">

play

The play event is fired when the user resumes a video or audio stream.

// Document
document.addEventListener('play', functionName(e));
document.play = function(){ };

// Window
window.addEventListener('play', functionName(e));
window.play = function(){ };

// Element
document.getElementById('id').addEventListener('play', functionName(e));
document.getElementById('id').play = function(){ };
<body play="functionName">

playing

The playing event is fired when the user resumes a video or audio stream.

// Document
document.addEventListener('playing', functionName(e));
document.playing = function(){ };

// Window
window.addEventListener('playing', functionName(e));
window.playing = function(){ };

// Element
document.getElementById('id').addEventListener('playing', functionName(e));
document.getElementById('id').playing = function(){ };
<body playing="functionName">

resize

The resize event is fired when the user resizes the window.

// Document
document.addEventListener('resize', functionName(e));
document.resize = function(){ };

// Window
window.addEventListener('resize', functionName(e));
window.resize = function(){ };

// Element
document.getElementById('id').addEventListener('resize', functionName(e));
document.getElementById('id').resize = function(){ };
<body resize="functionName">

seeked

The seeked event is fired when the user is finished seeking through a video or audio stream.

// Document
document.addEventListener('seeked', functionName(e));
document.seeked = function(){ };

// Window
window.addEventListener('seeked', functionName(e));
window.seeked = function(){ };

// Element
document.getElementById('id').addEventListener('seeked', functionName(e));
document.getElementById('id').seeked = function(){ };
<body seeked="functionName">

seeking

The seeking event is fired when the user starts seeking through a video or audio stream.

// Document
document.addEventListener('seeking', functionName(e));
document.seeking = function(){ };

// Window
window.addEventListener('seeking', functionName(e));
window.seeking = function(){ };

// Element
document.getElementById('id').addEventListener('seeking', functionName(e));
document.getElementById('id').seeking = function(){ };
<body seeking="functionName">

ratechanged

The ratechanged event is fired when the playback rate has changed.

// Document
document.addEventListener('ratechanged', functionName(e));
document.ratechanged = function(){ };

// Window
window.addEventListener('ratechanged', functionName(e));
window.ratechanged = function(){ };

// Element
document.getElementById('id').addEventListener('ratechanged', functionName(e));
document.getElementById('id').ratechanged = function(){ };
<body ratechanged="functionName">

volumechange

The volumechange event is fired when the volume has changed.

// Document
document.addEventListener('volumechange', functionName(e));
document.volumechange = function(){ };

// Window
window.addEventListener('volumechange', functionName(e));
window.volumechange = function(){ };

// Element
document.getElementById('id').addEventListener('volumechange', functionName(e));
document.getElementById('id').volumechange = function(){ };
<body volumechange="functionName">

ended

The ended event is fired when the media has reached the end.

// Document
document.addEventListener('ended', functionName(e));
document.ended = function(){ };

// Window
window.addEventListener('ended', functionName(e));
window.ended = function(){ };

// Element
document.getElementById('id').addEventListener('ended', functionName(e));
document.getElementById('id').ended = function(){ };
<body ended="functionName">

stalled

The stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.

// Document
document.addEventListener('stalled', functionName(e));
document.stalled = function(){ };

// Window
window.addEventListener('stalled', functionName(e));
window.stalled = function(){ };

// Element
document.getElementById('id').addEventListener('stalled', functionName(e));
document.getElementById('id').stalled = function(){ };
<body stalled="functionName">

suspend

The suspend event is fired when the user agent is intentionally not fetching media data, but does not have the entire media resource downloaded.

// Document
document.addEventListener('suspend', functionName(e));
document.suspend = function(){ };

// Window
window.addEventListener('suspend', functionName(e));
window.suspend = function(){ };

// Element
document.getElementById('id').addEventListener('suspend', functionName(e));
document.getElementById('id').suspend = function(){ };
<body suspend="functionName">

waiting

The waiting event is fired when the media is not fully downloaded, but can be played from the current position.

// Document
document.addEventListener('waiting', functionName(e));
document.waiting = function(){ };

// Window
window.addEventListener('waiting', functionName(e));
window.waiting = function(){ };

// Element
document.getElementById('id').addEventListener('waiting', functionName(e));
document.getElementById('id').waiting = function(){ };
<body waiting="functionName">

loadstart

The loadstart event is fired when the user agent is downloading media data.

// Document
document.addEventListener('loadstart', functionName(e));
document.loadstart = function(){ };

// Window
window.addEventListener('loadstart', functionName(e));
window.loadstart = function(){ };

// Element
document.getElementById('id').addEventListener('loadstart', functionName(e));
document.getElementById('id').loadstart = function(){ };
<body loadstart="functionName">

durationchange

The durationchange event is fired when the duration of the media resource is first known or changed.

// Document
document.addEventListener('durationchange', functionName(e));
document.durationchange = function(){ };

// Window
window.addEventListener('durationchange', functionName(e));
window.durationchange = function(){ };

// Element
document.getElementById('id').addEventListener('durationchange', functionName(e));
document.getElementById('id').durationchange = function(){ };
<body durationchange="functionName">

loadedmetadata

The loadedmetadata event is fired when the media metadata has been completely downloaded.

// Document
document.addEventListener('loadedmetadata', functionName(e));
document.loadedmetadata = function(){ };

// Window
window.addEventListener('loadedmetadata', functionName(e));
window.loadedmetadata = function(){ };

// Element
document.getElementById('id').addEventListener('loadedmetadata', functionName(e));
document.getElementById('id').loadedmetadata = function(){ };
<body loadedmetadata="functionName">

loadeddata

The loadeddata event is fired when the first frame of the media has finished loading.

// Document
document.addEventListener('loadeddata', functionName(e));
document.loadeddata = function(){ };

// Window
window.addEventListener('loadeddata', functionName(e));
window.loadeddata = function(){ };

// Element
document.getElementById('id').addEventListener('loadeddata', functionName(e));
document.getElementById('id').loadeddata = function(){ };
<body loadeddata="functionName">

progress

The progress event is fired when the browser detects progress has been made downloading the media.

// Document
document.addEventListener('progress', functionName(e));
document.progress = function(){ };

// Window
window.addEventListener('progress', functionName(e));
window.progress = function(){ };

// Element
document.getElementById('id').addEventListener('progress', functionName(e));
document.getElementById('id').progress = function(){ };
<body progress="functionName">

canplay

The canplay event is fired when the media can be played, but data is not available.

// Document
document.addEventListener('canplay', functionName(e));
document.canplay = function(){ };

// Window
window.addEventListener('canplay', functionName(e));
window.canplay = function(){ };

// Element
document.getElementById('id').addEventListener('canplay', functionName(e));
document.getElementById('id').canplay = function(){ };
<body canplay="functionName">

canplaythrough

The canplaythrough event is fired when the media can be played without stopping for buffering, yet the next frame of the media must be loading in order to play the following frame.

// Document
document.addEventListener('canplaythrough', functionName(e));
document.canplaythrough = function(){ };

// Window
window.addEventListener('canplaythrough', functionName(e));
window.canplaythrough = function(){ };

// Element
document.getElementById('id').addEventListener('canplaythrough', functionName(e));
document.getElementById('id').canplaythrough = function(){ };
<body canplaythrough="functionName">

timeupdate

The timeupdate event is fired when the current playback position has changed.

// Document
document.addEventListener('timeupdate', functionName(e));
document.timeupdate = function(){ };

// Window
window.addEventListener('timeupdate', functionName(e));
window.timeupdate = function(){ };

// Element
document.getElementById('id').addEventListener('timeupdate', functionName(e));
document.getElementById('id').timeupdate = function(){ };
<body timeupdate="functionName">

emptied

The emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.

// Document
document.addEventListener('emptied', functionName(e));
document.emptied = function(){ };

// Window
window.addEventListener('emptied', functionName(e));
window.emptied = function(){ };

// Element
document.getElementById('id').addEventListener('emptied', functionName(e));
document.getElementById('id').emptied = function(){ };
<body emptied="functionName">

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