In JavaScript, DOM events capture actions a user performs on an HTML element in a web application. Examples of user actions include clicking on a button or link, entering text into an input field or selecting an item from a list. To capture a user event, JavaScript has action listeners. Action listeners define a callback function that performs a certain set of instructions when an event occurs on a given HTML element. HTML elements have HTML event attributes. The following is a list of commonly used event attributes to capture mouse and keyboard events:<\/p>\n
onclick
\nondblclick
\nonmousedown
\nonmousemove
\nonmouseout
\nonmouseover
\nonmouseup
\nonkeydown
\nonkeypress
\nonkeyup<\/p>\n
The following is an example to perform a specific action when a button is clicked:<\/p>\n
\n\nIn an HTML file, define the button:\n\n <button id='testbutton'>Test<\/button>\n\n\nIn a JavaScript file, define the event handler:\n\n document.getElementById('testbutton').onclick = function(evt) {\n console.log(evt.target.id + ' was clicked');\n }\n\n<\/code><\/pre>\nThe evt variable is the HTML element that received the action. It can be used to access information about the HTML element.<\/p>\n
In the followng example, the button is changed to a div and the same click handler added. The div can then be styled to create a custom button:<\/p>\n
\n\nIn an HTML file, define the div:\n\n <div id='testbuttondiv'>Test<\/div>\n\n\nIn a JavaScript file, define the event handler:\n\n document.getElementById('testbuttondiv').onclick = function(evt) {\n console.log(evt.target.id + ' was clicked');\n }\n<\/code><\/pre>\nEvent handlers may also be defined using the addEventListener function.
\nExample:<\/p>\n
\n\nIn an HTML file, define the div:\n\n <div id='testbuttondiv'>Test<\/div>\n\n\nIn a JavaScript file, define the event handler:\n\n document.getElementById('testbuttondiv').addEventListener('click', function(evt) {\n console.log(evt.target.id + ' was clicked');\n }, false);\n \n<\/code><\/pre>\nThe event handler function may also be defined directly on the HTML element as shown below:<\/p>\n
\n\nIn an HTML file, define the div:\n\n <div id='testbuttondiv' onclick=\"console.log(testbuttondiv was clicked');\" >Test<\/div>\n \n<\/code><\/pre>\nI usually use the first approach since it is simpler and easier to read. I don’t use the third method because it is cleaner to put JavaScript code in a separate .js file rather than inlined inside the HTML.<\/p>\n
A complete list of HTML event attributes can be found here: https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events<\/a><\/p>\n(#sponsored)<\/br>
\nMore JavaScript<\/a><\/br><\/br><\/p>\n