Wednesday, May 10, 2017

Events

Until now all the tutorials were about the simple statements which were run or executed at the moment when the web page is loaded. But if we have to run the program only when a button is clicked, what we can do. For this we can use events.
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.
An event is nothing more than a signal. It communicates that something has just happened. This something could be a mouse click, key press on the keyboard, window getting resized  and so on.


Onclick is most frequently used event type. So let’s do an example with onclick event.



The result we got is,


When we click the button, the following alert is shown.



You can change the event instead 'onclick' and see the result.

JavaScript events are listed in below table. Thank you for watching this tutorial and if you have any questions don't forget to mention them in comments.

Event
Description
Offline
The event occurs when the document goes offline
Onabort
The event occurs on an abort event
onafterprint
The event occurs after the document is printed
onbeforeonload
The event occurs before the document loads
onbeforeprint
The event occurs before the document is printed
onblur
The event occurs when the window loses focus
oncanplay
The event occurs when media can start play, but might has to stop for buffering
oncanplaythrough
The event occurs when media can be played to the end, without stopping for buffering
onchange
The event occurs when an element changes
onclick
The event occurs on a mouse click
oncontextmenu
The event occurs when a context menu is triggered
ondblclick
The event occurs on a mouse double-click
ondrag
The event occurs when an element is dragged
ondragend
The event occurs at the end of a drag operation
ondragenter
The event occurs when an element has been dragged to a valid drop target
ondragleave
The event occurs when an element is being dragged over a valid drop target
ondragover
The event occurs at the start of a drag operation
ondragstart
The event occurs at the start of a drag operation
ondrop
The event occurs when dragged element is being dropped
ondurationchange
The event occurs when the length of the media is changed
onemptied
The event occurs when a media resource element suddenly becomes empty.
onended
The event occurs when media has reach the end
onerror
The event occurs when an error occur
onfocus
The event occurs when the window gets focus
onformchange
The event occurs when a form changes
onforminput
The event occurs when a form gets user input
onhaschange
The event occurs when the document has change
oninput
The event occurs when an element gets user input
oninvalid
The event occurs when an element is invalid
onkeydown
The event occurs when a key is pressed
onkeypress
The event occurs when a key is pressed and released
onkeyup
The event occurs when a key is released
onload
The event occurs when the document loads
onloadeddata
The event occurs when media data is loaded
onloadedmetadata
The event occurs when the duration and other media data of a media element is loaded
onloadstart
The event occurs when the browser starts to load the media data
onmessage
The event occurs when the message is triggered
onmousedown
The event occurs when a mouse button is pressed
onmousemove
The event occurs when the mouse pointer moves
onmouseout
The event occurs when the mouse pointer moves out of an element
onmouseover
The event occurs when the mouse pointer moves over an element
onmouseup
The event occurs when a mouse button is released
onmousewheel
The event occurs when the mouse wheel is being rotated
onoffline
The event occurs when the document goes offline
onoine
The event occurs when the document comes online
ononline
The event occurs when the document comes online
onpagehide
The event occurs when the window is hidden
onpageshow
The event occurs when the window becomes visible
onpause
The event occurs when media data is paused
onplay
The event occurs when media data is going to start playing
onplaying
The event occurs when media data has start playing
onpopstate
The event occurs when the window's history changes
onprogress
The event occurs when the browser is fetching the media data
onratechange
The event occurs when the media data's playing rate has changed
onreadystatechange
The event occurs when the ready-state changes
onredo
The event occurs when the document performs a redo
onresize
The event occurs when the window is resized
onscroll
The event occurs when an element's scrollbar is being scrolled
onseeked
The event occurs when a media element's seeking attribute is no longer true, and the seeking has ended
onseeking
The event occurs when a media element's seeking attribute is true, and the seeking has begun
onselect
The event occurs when an element is selected
onstalled
The event occurs when there is an error in fetching media data
onstorage
The event occurs when a document loads
onsubmit
The event occurs when a form is submitted
onsuspend
The event occurs when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdate
The event occurs when media changes its playing position
onundo
The event occurs when a document performs an undo
onunload
The event occurs when the user leaves the document
onvolumechange
The event occurs when media changes the volume, also when volume is set to "mute"
onwaiting
The event occurs when media has stopped playing, but is expected to resume

1 comment: