{"id":1114,"date":"2021-12-20T16:04:26","date_gmt":"2021-12-20T16:04:26","guid":{"rendered":"https:\/\/swatilathia.wordpress.com\/?page_id=1114"},"modified":"2024-12-21T03:02:27","modified_gmt":"2024-12-21T03:02:27","slug":"javascript-events","status":"publish","type":"page","link":"https:\/\/swatilathia.com\/?page_id=1114","title":{"rendered":"JavaScript Events, DOM, History Object"},"content":{"rendered":"\n

\n

Table of Contents<\/p>\nToggle<\/span>

DOM Methods and Properties<\/a>

History Object<\/a><\/li>

Key Features of the History Object<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n

<\/span>onclick <\/strong><\/span><\/h1>\n\n\n\n
\n
When a user clicks on an element, this event does occur. <\/li>\n\n\n\n
This event allows the programmer to execute a JavaScript\u2019s function when an element gets clicked. <\/li>\n\n\n\n
It is used to get warnings, messages, validating forms etc.<\/li>\n\n\n\n
It is used in almost every HTML element.<\/li>\n<\/ul>\n\n\n\n
\n
Syntax<\/strong><\/li>\n<\/ul>\n\n\n\n
<element onclick=\"JavaScript function\"><\/code><\/pre>\n\n\n\n\nExample<\/strong> : An alert box pops up when user clicks a button<\/li>\n<\/ul>\n\n\n\n<head>\n\t<script language=\"javascript\">\n\t\tfunction demo()\n\t\t{\n\t\t\talert(\"Welcome to Jamnagar\");\t\t\n\t\t}\n\t<\/script>\n<\/head>\n<body>\n\t<form>\n\t\tClick a button:\n\t\t<input type=\"button\" value=\"Click Here\" onclick=\"demo()\">\n\t<\/form>\n<\/body><\/code><\/pre>\n\n\n\n<\/span>ondblclick<\/strong><\/span><\/h1>\n\n\n\n\nWhen a user double clicks on an element, this event does occur. <\/li>\n\n\n\n This event allows the programmer to execute a JavaScript\u2019s function when an element gets clicked. <\/li>\n\n\n\n It is used to get warnings, messages, validating forms etc.<\/li>\n\n\n\n It is used in almost every HTML element.<\/li>\n<\/ul>\n\n\n\n\nSyntax<\/strong><\/li>\n<\/ul>\n\n\n\n<element ondblclick=\"JavaScript function\"><\/code><\/pre>\n\n\n\n\nExample<\/strong> : An alert box pops up when user double clicks this paragraph<\/li>\n<\/ul>\n\n\n\n<head>\n\t<script language=\"javascript\">\n\t\tfunction demo()\n\t\t{\n\t\t\talert(\"Welcome to Jamnagar\");\t\t\n\t\t}\n\t<\/script>\n<\/head>\n<body>\n\t<p style=\"background-color:cyan;\"ondblclick=\"demo();\">\n Double Click this paragraph\n <\/p>\n<\/body><\/code><\/pre>\n\n\n\n<\/span>onmouseover<\/strong><\/span><\/h1>\n\n\n\n\nWhen a mouse pointer is moved over any element, this event does occur.<\/li>\n<\/ul>\n\n\n\n\nSyntax<\/strong><\/li>\n<\/ul>\n\n\n\n<element onmouseover=\"JavaScript Function\"><\/code><\/pre>\n\n\n\n\nExample:<\/strong> When you move your mouse on paragraph, it will show you an alert box<\/li>\n<\/ul>\n\n\n\n<head>\n\t<script language=\"javascript\">\n\t\tfunction demo()\n\t\t{\n\t\t\talert(\"You have moved a mouse over a paragraph\");\t\t\n\t\t}\n\t<\/script>\n<\/head>\n<body>\n\t<p style=\"background-color:cyan;padding:50px;\" onmouseover=\"demo();\">\n Move a mouse here.. \n <\/p>\n<\/body><\/code><\/pre>\n\n\n\n<\/span>onmouseout<\/strong><\/span><\/h1>\n\n\n\n\nWhen a mouse pointer moves out of an element, this event does occur.<\/li>\n\n\n\n Syntax<\/strong><\/li>\n<\/ul>\n\n\n\n<element onmouseout=\"JavaScript Function\"><\/code><\/pre>\n\n\n\n\nExample<\/strong>: When you move out of paragraph, it will show an alert box.<\/li>\n<\/ul>\n\n\n\n<head>\n\t<script language=\"javascript\">\n\t\tfunction demo()\n\t\t{\n\t\t\talert(\"You have moved out of paragraph\");\t\t\n\t\t}\n\t<\/script>\n<\/head>\n<body>\n\t<p style=\"background-color:cyan;padding:50px;\" onmouseout=\"demo();\">\n Come here and leave the paragraph. \n <\/p>\n<\/body>\n<\/code><\/pre>\n\n\n\n<\/span>onkeypress<\/strong><\/span><\/h1>\n\n\n\n\nWhen a key from keyboard gets pressed, this event does occur<\/li>\n\n\n\n Syntax<\/strong><\/li>\n<\/ul>\n\n\n\n<input type=\"text\" onkeypress=\"JavaScript Function\"><\/code><\/pre>\n\n\n\n\nExample:<\/strong> When you press any key in text box, it will show an alert box.<\/li>\n<\/ul>\n\n\n\n<head>\n\t<script language=\"javascript\">\n\t\tfunction demo()\n\t\t{\n\t\t\talert(\"You have pressed a key\");\t\t\n\t\t}\n\t<\/script>\n<\/head>\n<body>\n\t<form>\n\t\tEnter anything:\n\t\t<input type=\"text\" onkeypress=\"demo();\">\n\t<\/form>\n<\/body>\n<\/code><\/pre>\n\n\n\n<\/span>onkeyup<\/strong><\/span><\/h1>\n\n\n\n\nWhen user releases a key from a keyboard, this event does occur.<\/li>\n\n\n\n Syntax<\/strong><\/li>\n<\/ul>\n\n\n\n<input type=\"text\" onkeyup=\"JavaScript Function\"><\/code><\/pre>\n\n\n\n\nExample:<\/strong> When you release a key from keyboard, it will show you an alert box<\/li>\n<\/ul>\n\n\n\n<head>\n\t<script language=\"javascript\">\n\t\tfunction demo()\n\t\t{\n\t\t\talert(\"You have released a key\");\t\t\n\t\t}\n\t<\/script>\n<\/head>\n<body>\n\t<form>\n\t\tEnter anything:\n\t\t<input type=\"text\" onkeyup=\"demo();\">\n\t<\/form>\n<\/body>\n<\/code><\/pre>\n\n\n\n<\/span>onfocus<\/strong><\/span><\/h1>\n\n\n\n\nWhen an elements get focus, this event does execute. This event is most often used with <input>, <select>, and <a>.<\/li>\n\n\n\n Syntax<\/strong><\/li>\n<\/ul>\n\n\n\n<element onfocus=\"JavaScript Function\"><\/code><\/pre>\n\n\n\n\nExample<\/strong>: After entering two values in text boxes, when you tab on third text box, the total will be displayed in it.<\/li>\n<\/ul>\n\n\n\n<head>\n\t<script language=\"javascript\">\n\t\tfunction demo()\n\t\t{\n\t\t\tval1=parseInt(document.getElementById(\"t1\").value);\n\t\t\tval2=parseInt(document.getElementById(\"t2\").value);\n\t\t\tdocument.getElementById(\"t3\").value=val1+val2;\t\t\n\t\t}\n\t<\/script>\n<\/head>\n<body>\n\t<form>\n\t\tEnter Value 1:\n\t\t<input type=\"text\" id=\"t1\"><br>\n\t\tEnter Value 2:\n\t\t<input type=\"text\" id=\"t2\"><br>\n\t\tTotal:\n\t\t<input type=\"text\" id=\"t3\" onfocus=\"demo();\"><br>\n\t<\/form>\n<\/body>\n<\/code><\/pre>\n\n\n\n<\/span>onblur<\/strong><\/span><\/h1>\n\n\n\n\nWhen an object loses focus, this event gets execute.<\/li>\n\n\n\n Syntax<\/strong><\/li>\n<\/ul>\n\n\n\n<element onblur=\"JavaScript Function\"><\/code><\/pre>\n\n\n\n\nExample<\/strong>: When second text box loses it focus, total will be set in third text box.<\/li>\n<\/ul>\n\n\n\n<head>\n\t<script language=\"javascript\">\n\t\tfunction demo()\n\t\t{\n\t\t\tval1=parseInt(document.getElementById(\"t1\").value);\n\t\t\tval2=parseInt(document.getElementById(\"t2\").value);\n\t\t\tdocument.getElementById(\"t3\").value=val1+val2;\t\t\n\t\t}\n\t<\/script>\n<\/head>\n<body>\n\t<form>\n\t\tEnter Value 1:\n\t\t<input type=\"text\" id=\"t1\"><br>\n\t\tEnter Value 2:\n\t\t<input type=\"text\" id=\"t2\" onblur=\"demo();\"><br>\n\t\tTotal:\n\t\t<input type=\"text\" id=\"t3\"><br>\n\t<\/form>\n<\/body><\/code><\/pre>\n\n\n\n<\/span>onload<\/strong><\/span><\/h1>\n\n\n\n\nThe onload event occurs when an object has been loaded.<\/li>\n\n\n\n onload is often used within the <body> element to execute a script once a web page has completely loaded all content including images, script files, CSS files, etc.<\/li>\n\n\n\n The onload event can be used to check the visitor\u2019s browser type and browser version, and load the proper version of the web page based on the information.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong><\/p>\n\n\n\n <element onload=\"JavaScript Function\"><\/code><\/pre>\n\n\n\nExample:<\/strong> <\/p>\n\n\n\n <html>\n<head>\n\t<script>\n\tfunction demo() \n\t{\n\t alert(\"Image is loaded\");\n\t}\n\t<\/script>\n<\/head>\n<body>\n<img src=\"im1.jpg\" onload=\"demo()\" width=\"100\" height=\"132\">\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>onchange<\/strong><\/span><\/h2>\n\n\n\nWhen the value of an element has been changed, this event gets execute. For radio buttons and check boxes, the onchange event occurs when the checked state has been changed.<\/p>\n\n\n\n Syntax<\/strong><\/p>\n\n\n\n <element onchange=\"JavaScript Function\"><\/code><\/pre>\n\n\n\nExample<\/strong>: When you change the value from select option, it will show an alert box<\/p>\n\n\n\n <html>\n<head>\n\t<script>\n\tfunction demo() \n\t{\n\t alert(\"You have changed the value\");\n\t}\n\t<\/script>\n<\/head>\n<body>\n\t<form>\n\t\tSelect Subject:\n\t\t<select onchange=\"demo();\">\n\t\t\t<option>HTML<\/option>\n\t\t\t<option>JavaScript<\/option>\n\t\t\t<option>CSS<\/option>\n\t\t\t<option>Networking<\/option>\n\t\t<\/select>\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>onsubmit<\/strong><\/span><\/h2>\n\n\n\nWhen a form is submitted, this event gets occur<\/p>\n\n\n\n Syntax<\/strong><\/p>\n\n\n\n <form onsubmit=\"JavaScript Function\"><\/code><\/pre>\n\n\n\nExample<\/strong>: When you submit a form, the alert box will be displayed<\/p>\n\n\n\n <html>\n<head>\n\t<script>\n\tfunction demo() \n\t{\n\t alert(\"Your form has been submitted\");\n\t}\n\t<\/script>\n<\/head>\n<body>\n\t<form method=get onsubmit=\"demo();\">\n\t\tEnter your name:\n\t\t<input type=\"text\" name=\"t1\">\n\t\t<br>\n\t\t<input type=\"submit\" value=\"Submit Form\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>onreset<\/strong><\/span><\/h2>\n\n\n\nWhen a form is reset, this event gets occur<\/p>\n\n\n\n Syntax<\/strong><\/p>\n\n\n\n <form onreset=\"JavaScript Function\"><\/code><\/pre>\n\n\n\nExample<\/strong>: When you click a reset button, form will be reset and an alert box will display<\/p>\n\n\n\n <html>\n<head>\n\t<script>\n\tfunction demo() \n\t{\n\t alert(\"Your form has been reset\");\n\t}\n\t<\/script>\n<\/head>\n<body>\n\t<form method=get onreset=\"demo();\">\n\t\tEnter your name:\n\t\t<input type=\"text\" name=\"t1\">\n\t\t<br>\n\t\t<input type=\"Reset\" value=\"Reset Form\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>DOM \u2013 Document Object Model<\/span><\/h2>\n\n\n\n\nDOM<\/strong> stands for Document Object Model<\/strong>, and it represents the structure of a web page as an object-oriented tree structure. <\/li>\n\n\n\n In simpler terms, the DOM is the interface that allows JavaScript to interact with the content, structure, and styling of a web page.<\/li>\n\n\n\n There are mainly three points :\n\nDocument<\/strong>: Refers to the web page.<\/li>\n\n\n\n Object<\/strong>: Each part of the web page (like elements, attributes, and text) is represented as an object.<\/li>\n\n\n\n Model<\/strong>: The hierarchical structure that organizes the objects and their relationships in a tree-like format.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>DOM Structure<\/strong><\/span><\/h2>\n\n\n\n\nThe DOM represents the entire HTML document as a tree of nodes. Each node corresponds to a part of the document, such as:\n\nDocument Node<\/strong>: The root of the DOM tree, representing the entire document.<\/li>\n\n\n\n Element Nodes<\/strong>: Represent HTML elements (e.g., <div><\/code>, <p><\/code>, <a><\/code>).<\/li>\n\n\n\n Text Nodes<\/strong>: Represent the text inside an element (e.g., the text inside a <p><\/code> tag).<\/li>\n\n\n\n Attribute Nodes<\/strong>: Represent the attributes of HTML elements (e.g., id<\/code>, class<\/code>).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>DOM Tree Example<\/strong><\/span><\/h2>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Example Page<\/title>\n <\/head>\n <body>\n <h1>Welcome to My Website<\/h1>\n <p>This is Swati Lathia from H J Doshi Jamnagar.<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nDocument\n \u2514\u2500\u2500 html\n \u251c\u2500\u2500 head\n \u2502 \u2514\u2500\u2500 title\n \u2502 \u2514\u2500\u2500 \"Example Page\"\n \u2514\u2500\u2500 body\n \u251c\u2500\u2500 h1\n \u2502 \u2514\u2500\u2500 \"Welcome to my page\"\n \u2514\u2500\u2500 p\n \u2514\u2500\u2500 \"This is a paragraph.\"<\/code><\/pre>\n\n\n\n<\/span>DOM and JavaScript<\/strong><\/span><\/h2>\n\n\n\n\nJavaScript uses the DOM to interact with the web page dynamically. You can use JavaScript to:\n\nAccess HTML elements<\/strong>: JavaScript can select and modify HTML elements using methods like document.getElementById()<\/code>, or document.getElementsByClassName()<\/code>.<\/li>\n\n\n\n Manipulate HTML content<\/strong>: You can change the content of an element, add new elements, or remove elements.<\/li>\n\n\n\n Modify styles<\/strong>: JavaScript allows you to change the CSS of elements dynamically using the .style<\/code> property or by adding\/removing CSS classes.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>DOM Methods and Properties<\/strong><\/span><\/h2>\n\n\n\n\nHere are some commonly used DOM methods and properties:<\/li>\n<\/ul>\n\n\n\n\nSelecting Elements<\/strong>:\n\ndocument.getElementById(\"id\")<\/code>: Selects an element by its id<\/code>.<\/li>\n\n\n\n document.getElementsByClassName(\"className\")<\/code>: Selects all elements with the given class name.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Manipulating Elements<\/strong>:\n\n.innerHTML<\/code>: Gets or sets the HTML content inside an element.<\/li>\n\n\n\n .textContent<\/code>: Gets or sets the text content inside an element.<\/li>\n\n\n\n .setAttribute(attribute, value)<\/code>: Sets an attribute value (e.g., class<\/code>, id<\/code>).<\/li>\n\n\n\n .appendChild(node)<\/code>: Adds a new child node to an element.<\/li>\n\n\n\n .removeChild(node)<\/code>: Removes a child node from an element.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Events<\/strong>:\n\n.addEventListener(event, function)<\/code>: Adds an event listener to an element (e.g., click<\/code>, mouseover<\/code>).<\/li>\n\n\n\n .removeEventListener(event, function)<\/code>: Removes an event listener.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>History Object<\/strong><\/span><\/h3>\n\n\n\n\nIn JavaScript, the History<\/code><\/strong> object is part of the window<\/code><\/strong> object and allows you to interact with the browser\u2019s session history. <\/li>\n\n\n\n Session history refers to the history of pages that the user has visited in the current window or tab. <\/li>\n\n\n\n The History<\/code> object provides methods to navigate back and forth through the pages in the session history stack, as well as manage and manipulate the browser\u2019s history state.<\/li>\n<\/ul>\n\n\n\n<\/span>Key Features of the History<\/code> Object<\/strong><\/span><\/h3>\n\n\n\n\nAccess to the Browser\u2019s History:<\/strong>\n\nThe History<\/code> object allows you to manipulate the browser\u2019s history and navigate through the pages the user has visited.<\/li>\n\n\n\n You cannot access the URLs or content of pages in the history, but you can control navigation through those pages.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Methods:<\/strong>\n\nhistory.back()<\/code><\/strong>: This method behaves like the \u201cBack\u201d button in a browser. It moves the user to the previous page in the history list.<\/li>\n\n\n\n history.forward()<\/code><\/strong>: This method behaves like the \u201cForward\u201d button in a browser. It moves the user to the next page in the history list.<\/li>\n\n\n\n history.go(delta)<\/code><\/strong>: This method allows you to go forward or backward by a specified number of pages. For example, history.go(-1)<\/code> moves one page back, and history.go(1)<\/code> moves one page forward. The delta<\/code> argument can be positive or negative, representing the number of steps forward or backward.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n\nProperties:<\/strong><\/li>\n<\/ul>\n\n\n\n\nhistory.length : <\/strong>This property returns the number of entries in the session history.<\/li>\n\n\n\n history.state : <\/strong> This property returns the state object associated with the current history entry, which is set using pushState<\/code> or replaceState<\/code>.<\/li>\n<\/ul>\n\n\n\n\nExample : page1.html<\/strong><\/li>\n<\/ul>\n\n\n\n<h1>This is Page 1 Heading<\/h1>\n<p>Click below button to go to next page<\/p>\n<button onclick=\"f1();\">Go to Page 2<\/button>\n<script>\n function f1()\n {\n window.location.href=\"page2.html\";\n }\n<\/script><\/code><\/pre>\n\n\n\n\npage2.html<\/strong><\/li>\n<\/ul>\n\n\n\n<h1>This is Page 2 Heading<\/h1>\n<p>Click below button to go to previous page<\/p>\n<button onclick=\"f2();\">Go Back<\/button>\n<script>\n function f2()\n {\n history.back();\n }\n<\/script><\/code><\/pre>\n\n\n\n\nExample : Length property<\/strong><\/li>\n<\/ul>\n\n\n\npage1.html\n\n<h1>This is Page 1<\/h1>\n<a href=\"page2.html\">Click to Page 2<\/a>\n\npage2.html\n\n<h1>This is Page 2<\/h1>\n<a href=\"page3.html\">Click to Page 3<\/a>\n<script>\ndocument.write(window.history.length, \"Pages are opened in browser history\");\n<\/script>\n\npage3.html\n\n<h1>This is Page 3<\/h1>\n<a href=\"page1.html\">Click to Page 1<\/a><\/code><\/pre>\n<\/body>","protected":false},"excerpt":{"rendered":"onclick ondblclick onmouseover onmouseout onkeypress onkeyup onfocus onblur onload Syntax Example: onchange When the value of an element has been changed, this event gets execute. For radio buttons and check boxes, the onchange event occurs when the checked state has been changed. Syntax Example: When you change the value from select option, it will show […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-1114","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/1114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1114"}],"version-history":[{"count":4,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/1114\/revisions"}],"predecessor-version":[{"id":5619,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/1114\/revisions\/5619"}],"wp:attachment":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}