In HTML and JavaScript parlance an event can be either something the browser does or something the user does. What this means is that both the browser and the user can trigger an event. An example of a user triggered event is a button click.
\n
\n
\n
\n
\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n
\nAn example of a Browser event is page load finished, that’s when a webpage load finishes. When an event occurs, we might want to respond appropriately. For example if a user clicks a button, you can respond by showing an alert message. To listen for events we register an event listener. In this example we are going to learn about HTML and JavaScript click events.
\nFor this example we will use:<\/p>\n
The onclick event occurs when the user clicks on an element. \u00a0A user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.
\nOne way we can do this is to add an onClick attribute directly to the element. Lets do this in the next section.<\/p>\n
< button value=submit onclick=press() >\r\nPress\r\n<\/button>\r\n<\/pre>\nAbove we showed how to add the onclick attribute to an element. The full example is presented below.<\/p>\n
index.html<\/em><\/span><\/p>\n
\r\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Onclick Event Attribute Example\r\n<\/title>\r\n\t<style>\r\n#pres{\r\nwidth:90px;\r\nheight:30px;\r\nmargin:20px;\r\n}\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n<script>\r\nfunction press(){\r\nalert(\" YOU PRESSED ME \");\r\n\r\n\r\n}\r\n\r\n<\/script>\r\n <button id=pres onclick=press() value=\"press\">\r\nPress\r\n<\/button>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nNote: <\/b>Inline JavaScript should be avoided because it makes the markup bigger and less readable. The content, structure and behavior are not well-separated, thus making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the\u00a0Window\u00a0object, thus polluting the global namespace.<\/p>\n
1.2 Other Methods<\/h3>\n
document.getElementById(\"pres\").onclick=function (){\r\n\r\n}\r\n<\/pre>\nA full example below<\/p>\n
index2.html<\/em><\/span><\/p>\n
\r\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Onclick Event Attribute Example\r\n<\/title>\r\n\t<style>\r\n#pres{\r\nwidth:90px;\r\nheight:30px;\r\nmargin:20px;\r\n}\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar v=document.getElementById(\"pres\")\r\nv.onclick=press;\r\n}\r\n\r\nfunction press(){\r\nalert(\" YOU PRESSED ME \");\r\n\r\n\r\n}\r\n\r\n<\/script>\r\n <button id=pres value=\"press\">\r\nPress\r\n<\/button>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nWe register an event handler in line 31 (when the webpage finishes loading, our function init is called). In the init function we add an event listener to our button object. Another way of listening for events on an object below:<\/p>\n
object.addEventListener(\"click\",function);\r\n\r\n<\/pre>\nWith this method we first get the button(or any other element) object and call the above function on it. The above function can take two or three parameters. The first parameter is the event we want to listen too. (In this case a click event).
\nNotice we didn’t put the “on” prefix, when using this method. We don’t add the “on” before the event whenever we use this method. The second parameter represents function we want to call to handle the event. The third parameter is always a boolean which can be either true or false. It specifies whether the event should be executed in the capturing or in the bubbling phase.
\nTip: <\/b> You can remove or detach an event listener added withaddEventListener\u00a0<\/code>by callingdocument.removeEventlistener(); .<\/code>A full example is shown below:<\/p>\nindex3.html<\/em><\/span><\/p>\n
\r\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Onclick Event Attribute Example\r\n<\/title>\r\n\t<style>\r\n#pres{\r\nwidth:90px;\r\nheight:30px;\r\nmargin:20px;\r\n}\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar v=document.getElementById(\"pres\")\r\nv.addEventListener(\"click\",press,false);\r\n}\r\n\r\nfunction press(){\r\nalert(\" YOU PRESSED ME \");\r\n\r\n}\r\n\r\n<\/script>\r\n <button id=pres value=\"press\">\r\nPress\r\n<\/button>\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n\r\n<\/pre>\n2. Summary<\/h2>\n
In this example we learnt about JavaScript events. We also wrote a detailed tutorial about HTML and JavaScript onclick events and how to handle them.<\/p>\n
3. Download the source code<\/h2>\n