{"id":3025,"date":"2019-06-12T00:45:42","date_gmt":"2019-06-12T00:45:42","guid":{"rendered":"http:\/\/softlect.in\/?p=3025"},"modified":"2019-06-12T01:12:09","modified_gmt":"2019-06-12T01:12:09","slug":"javascript-event-handling","status":"publish","type":"post","link":"http:\/\/softlect.com\/index.php\/javascript-event-handling\/","title":{"rendered":"JavaScript – Event Handling"},"content":{"rendered":"

Event Handling<\/strong><\/p>\n

Any action that a user performs on a web page is known as an event. Like moving of mouse, clicking button, clicking a link, text input, selection or even loading a page. Event handlers are used to handle an event on a web page. JavaScript has a predefined event handler as property of an object. When an event occurs, JavaScript event handlers can be used to identify events and perform a specific task.<\/p>\n

 <\/p>\n

Event handlers can be used directly within HTML elements by using special attributes. The event handlers can also be used within <script> <\/script> tags or in an external javascript file.<\/p>\n

 <\/p>\n

Event Handlers in HTML elements<\/strong><\/p>\n

To add event handler in HTML elements we need to use actual event handler name. For example:<\/p>\n

<input type=\u201dbutton\u201d \u00a0value=\u201dClick Here\u201d event-handler-name=\u201dJavaScript Code for the Event\u201d><\/p>\n

 <\/p>\n

For the above example we will be using onclick event handler, which is triggered when user clicks a button. Please note that event-handler-name is an event handler attribute and not an HTML attribute. In HTML attribute only values can be assigned, but whereas in event handler attribute javascript code can be added. For example:<\/p>\n

<input type=\u201dbutton\u201d value=\u201dClick Here\u201d onclick=\u201dwindow.alert(\u2018Clicked\u2019);\u201d><\/p>\n

In the above code when a user clicks on the button, an alert window will popup displaying the message.<\/p>\n

 <\/p>\n

The Javascript code inside event handler attribute ends with a semicolon. This enables us to add multiple javascript statements to perform several actions on click event.<\/p>\n

 <\/p>\n

When using multiple statements to perform several actions in HTML elements, the javascript code can become really long, which is cumbersome to debug. Therefore, the code can also be written as a function, and event handler can call this function to perform actions. For example:<\/p>\n

function displaymsg()<\/p>\n

{<\/p>\n

alert(\u201cButton\u201d);<\/p>\n

alert(\u201cClicked\u201d);<\/p>\n

}<\/p>\n

<input type=\u201dbutton\u201d value=\u201dClick Here\u201d onclick=\u201ddisplaymsg();\u201d><\/p>\n

 <\/p>\n

Event Handler in Script Code<\/strong><\/p>\n

The event handlers can also be written within script code, to do this id attribute need to be specified in HTML elements. The id attribute can then be retrieved using document.getElementById() method to access the HTML element.<\/p>\n

<input type=\u201dbutton\u201d value=\u201dClick Here\u201d id=\u201dbt1\u201d><\/p>\n

 <\/p>\n

<script><\/p>\n

var elem = document.getElementById(\u201cbt1\u201d);<\/p>\n

elem.onclick = function ()<\/p>\n

{<\/p>\n

alert(\u201cButton\u201d);<\/p>\n

alert(\u201cClicked\u201d);<\/p>\n

}<\/p>\n

<\/script><\/p>\n

In the above code function expression is used to assign event handler to the id retrieved with click event.<\/p>\n

 <\/p>\n

Events table please check<\/p>\n

 <\/p>\n

Click Event<\/strong><\/p>\n

The Click event occurs when user clicks on an element. For Example:<\/p>\n

Event on a link <a><\/p>\n

 <\/p>\n

Focus and Blur events<\/strong><\/p>\n

The focus event occurs when the user focus on an element. The focus is given by clicking some place within the item. For example:<\/p>\n

<input<\/p>\n

 <\/p>\n

The blur event occurs when the user takes the focus away from an element.<\/p>\n

<input<\/p>\n

 <\/p>\n

Load and unload events<\/strong><\/p>\n

The load event occurs when web page finishes loading.<\/p>\n

<body<\/p>\n

 <\/p>\n

The unload event occurs when a user leaves the current web page.<\/p>\n

<body<\/p>\n

 <\/p>\n

Reset and submit events<\/strong><\/p>\n

The submit and reset event are used when forms are used in a document. The form can have its contents to by submitted or reset. The submit event occurs when a user submits a form. The reset event occurs when a user wants to reset form fields by clicking reset button.<\/p>\n

<form onsubmit=<\/p>\n

 <\/p>\n

Mouse Events<\/strong><\/p>\n

mousedown<\/p>\n

mouseup<\/p>\n

mouseenter<\/p>\n

mouseleave<\/p>\n

mouseover<\/p>\n

mouseout<\/p>\n

mousemove<\/p>\n

mousewheel<\/p>\n

 <\/p>\n

Keyboard Events<\/strong><\/p>\n

keydown<\/p>\n

keypress<\/p>\n

keyup<\/p>\n

 <\/p>\n

Registering Multiple Events<\/strong><\/p>\n

The event such as onclick, onblur, onfocus, onload etc. are known as DOM level 0 event handlers. The DOM level 0 event handler allows only one event to be registered on any element. The Javascript provides methods such as addEventListener() and attachEvent() that allow multiple events to be attached to an element and these are known as DOM Level 2 event handlers.<\/p>\n

 <\/p>\n

To better understand DOM level 0 event handling, let us see the example below:<\/p>\n

<script><\/p>\n

var elem = document.getElementById(\u201cbt1\u201d);<\/p>\n

elem.onclick = function ()<\/p>\n

{<\/p>\n

alert(\u201cButton\u201d);<\/p>\n

}<\/p>\n

elem.onclick = function ()<\/p>\n

{<\/p>\n

alert(\u201cClicked\u201d);<\/p>\n

}<\/p>\n

<\/script><\/p>\n

 <\/p>\n

In the above example, the second onclick event handler will override the first onclick event handler, since only one event can be assigned to an element. By using DOM level 2 event handlers this issue can be avoided.<\/p>\n

 <\/p>\n

The addEventListner() method allows three arguments, which are event, function to execute an event and value true\/false depending on how the event handler functions in capturing and bubbling phase. For example:<\/p>\n

element.addEventListner(\u201cevent_type\u201d, function, true\/false);<\/p>\n

 <\/p>\n

<script><\/p>\n

var elem = document.getElementById(\u201cbt1\u201d);<\/p>\n

elem.addEventListener(\u201cclick\u201d, function ()<\/p>\n

{<\/p>\n

alert(\u201cButton\u201d);<\/p>\n

}, false);<\/p>\n

<\/script><\/p>\n

 <\/p>\n

If capturing is used, then outer most elements event occurs first and then innermost elements event occurs last. If bubbling is used it is exactly opposite. Bubbling phase is recommended and most commonly used.<\/p>\n

 <\/p>\n

attachEvent() method<\/p>\n

The attachEvent() method works the same way as addEventListener() method, but only works in bubbling phase. For Example:<\/p>\n

element.attachEvent(event_handler,function-name);<\/p>\n

 <\/p>\n

<script><\/p>\n

var elem = document.getElementById(\u201cbt1\u201d);<\/p>\n

elem.addEventListener(onclick, function ()<\/p>\n

{<\/p>\n

alert(\u201cButton\u201d);<\/p>\n

});<\/p>\n

<\/script><\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Event Handling Any action that a user performs on a web page is known as an event. Like moving of mouse, clicking button, clicking a link, text input, selection or… <\/p>\n","protected":false},"author":1,"featured_media":3047,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[78],"tags":[],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/posts\/3025"}],"collection":[{"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/comments?post=3025"}],"version-history":[{"count":2,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/posts\/3025\/revisions"}],"predecessor-version":[{"id":3057,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/posts\/3025\/revisions\/3057"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/media\/3047"}],"wp:attachment":[{"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/media?parent=3025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/categories?post=3025"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/tags?post=3025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}