It is many years now since it was necessary to clutter the HTML for your web page with JavaScript event handlers in order to attach processing into your page. While you may have some JavaScript that was written some time ago that still uses JavaScript event handlers embedded in the HTML you shouldn't be using that with any new JavaScript that you add to your pages and the next time you update the page you should look at removing the JavaScript event handlers out of the HTML anr replacing them with JavaScript code.
If the script you are trying to use is an old one that still relies on event processing in the HTML then you should amend it so that the events are handled in the JavaScript instead. What we are going to look at here is just ecactly how you should go about doing that.
We are going to look at two different situations with regard to event handlers in your web page - the first are those that appear in the body tag and the second are those that appear elsewhere in the page - slightly different processing is required depending on which of these you are trying to replace.
First with those in the body tag. The most common event handler you see attached here is onload and so I am going to use that for the example however the exact same process should be applied to any other event handlers in the body tag. Assuming that you also move all the code out of the body tag that belongs in the CSS your body tag should eventially consist simply of <body>. Let's look at that example of an onload event handler in the body.
<body onload="dosomething(p1,p2)">
When you remove that onload from the body tag you need to add it to the JavaScript using the following:
window.onload = function() {dosomething(p1,p2);};
If there is nothing inside the () of the original onload in the body then we can simplify it to:
window.onload = dosomething;
To attach events to elements within the web page is slightly more complicated but not much. To start with, instead of simply removing the event handler from the HTML we need to make sure that there is a way to easily reference that tag from JavaScript. If the tag does not already have an id attribute we need to add one specifying a value that will allow us to easily identify the tag from outside the HTML.
The second thing we need to take into account is that the HTML must have already loaded before we try to attach an event handler to it. This was taken care of for us automatically when the event handler was hard coded in the HTML but we need to control when our JavaScript runs to make sure that it continues to be the case when we move the event handler into the JavaScript. The easiest way to do this is to add the JavaScript that adds the event processing to the bottom of the body of the web page.
Again all of the event handlers attached into the web page can be handled the same way so we only need one example to show what to do.
<span onclick="dosomething(p1,p2)">
It doesn't matter what the tag is or whatevent we are trying to attach, the first thing we need to do is to add an id to that tag which uniquely identifies it so we can reference it easily from the JavaScript.
<span id="uniqueid">
We can now add the event handler to that tag from within the JavaScript using:
document.getElementById('uniqueid').onclick = function() {dosomething(p1,p2);};
As long as that runs after the tag loads it will add the event handler to the tag. We simply repeat this same process for each event handler in the HTML in order to separate out the JavaScript from the HTML.
Note that the event handlers in the HTML sometimes have one or more of the letters in the nale shown in capitals. This works in HTML because HTML is not case sensitive. JavaScript is case sensitive and so when you move the event handlers into the JavaScript code you need to make sure that they are all correctly written in all lowercase.
You may have come across references to event listeners and Internet Explorer's attachEvent. I haven't suggested using those in doing this conversion for two reasons. Firstly using them means using slightly more complex code than I have shown here and I have tried to make this code substitution as simle as possible for beginners, those who know about event listeners etc wouldn't need this page anyway. Secondly the code I have supplied is the direct equivalent of the HTML event handlers. The extra functionality offered by event listeners is not available within the HTML. Having separated out the event handlers into the JavaScript from the HTML you can then replace them with event listeners by updating just your JavaScript at such time as you need to make the change without needing to make any further changes to the HTML.
So now you have no excuse for including any event handlers in the HTML of any new web pages that you write.
