Skip to content

A Clean Way for Adding EventListeners in HTML

September 9, 2013

When you deal with extremely complicated and long scripts, its easy to get lost in your codes and find it hard to follow. In javascript, there are many ways you can add event Listeners in your HTML elements. One way I find convenient and clean is by adding these listeners on a separate section or file without touching anything in the elements. Below is a simple example to show you to use the “document.getElementById (‘idName’).onclick”.

HTML CODE

  1. <html >
  2. <head>
  3. <title>
  4. testing events of javascript
  5. </title>
  6. <script type = “text/javascript” >
  7. // when everything is loaded, loadthis function will fireoff
  8. window.onload = loadthis;
  9. function loadthis()
  10. {
  11. // onclick event registered to “links” id
  12. // and fires off the functs function when that link
  13. // element is clicked
  14. document.getElementById(“links”).onclick = functs;
  15. function functs()
  16. {
  17. // pops up the dialog.
  18. alert(“you are clicking”);
  19. }
  20. }
  21. ;
  22. </script>
  23. </head>
  24. <body >
  25. <!– only needed to add an id name or also a class name –>
  26. <!– a clean way of using javascript –>
  27. <button id = “links”>
  28. <font face = “verdana” color = “red” size = “10”>
  29. CLICK ME
  30. </font>
  31. </button>
  32. </body>
  33. </html>

Simple, Free Image and File Hosting at MediaFire

Instead of using “document.getElementById(‘idName’).onclick”, you can instead use “document.getElementById(‘idName’).addEventListener(“click”, myFunction, false)” Below are the codes to get the id, name, or forms id in javascript.

  1. document.getElementById (‘idName’).onclick
  2. document.getElementById (‘idName’).addEventListener(“click”, myFunction, false)
  3. document.forms[‘indexNumberofForm’].elements[‘indexNumberofElement’].onclick
  4. document.nameOfForm.nameOfElement.onclick

If youve got something to add, correction, just comment.

Advertisements

From → HTML, JavaScript

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

TurtleAndRobot.com

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.

paritoshmishra

Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.

ProgramThat;

A simple guide to programming...

ITechonology

Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans

Gigaom

Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

The Neighborhood

society online's social conscious

HarsH ReaLiTy

A Good Blog is Hard to Find

VentureBeat

News About Tech, Money and Innovation

retireediary

The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: