Events occur when the user clicks on the link or button, hover or swipe over an element, Type any think, resize the window or when the page is loads.
To trigger a particular function, an event can be used. When a user interacts with a different part of the page, need to use different code to trigger the function.
|click||When the user presses and releases a button on the element|
|dbclick||When the user presses and releases a button twice on the element|
|mousedown||When the user presses mouse button while over an element|
|mouseup||When the user releases and releases a button on the element|
|mousemove||When user move the mouse|
|mouseover||When user move the mouse over an element|
|mouseout||When user move the mouse off an element|
Let’s discuss mouse event with click Event examples over events.
As A Result:
When user click on the Which event this is button. And the output is
|keydown||When user press the key and repeat while the key is depressed|
|keyup||When the user release the key|
|keypress||When user insert character.|
Let’s discuss keyboard event with keydown Event examples over events.
As a Result:
When user press the Keys. And the output is
|load||When web page has finished loading.|
|unload||When web page is unloading. Usually because a new page was requested or visitor leaves the current webpage.|
|resize||Browser window has been resized.|
|scroll||When user has scrolled up or down the page.|
Let’s discuss UI event with load Event examples over events.
As a Result:
- Select element: The first step is, selecting an element node where the user wants the script to respond.
If You want to trigger a function when the user clicks on the link or button. You need to get the DOM node for that link element.
- Specify Event: We select an element, Now it’s time to select which event will be performed on the selected node.
For example Mouse event, a keyboard event, etc.
- Call Code: State the code you want to run when the event occurs.
Event fire or are raised:
When the event has occurred, it is called having fired or been raised. For example: if the user clicks or tap on the button or link, then the click event would be fired in the browser.
Events trigger scripts
When the click event fires on the element, it is known as Trigger a function script.
|focus||When the element gain the focus|
|blur||When the element lose the focus|
|change||When the user modifies or changes the value of a form element|
|submit||When user submits a form by using button or a key.|
|reset||When user click on the form reset button to reset the value.|
|cut||When user cuts content form the form field.|
|copy||When user cuts content form the form field.|
|paste||When user paste content form the form field.|
|select||When user selects some text in the form field.|
|DOMSubtreeModified||Chang has been made to document|
|DOMNodeInserted||Node is inserted as a direct child of another node|
|DOMNodeRemoved||Node is removed from another node|
|DOMNodeInsertedIntoDocument||Node is inserted as a descendant of another node.|
|DOMNodePemovedIntoDocument||Node is removed as a descendant of another node.|