Jani said:
Event listeners *is* JavaScript, not HTML. HTML cannot *do* anything, it
is not a programming language, it is markup only, HyperText Markup
Language...
But the browser can do it for you [1]
And you can add a little JavaScript. [2] The W3C also handle a little
bit with events.
Okay, I will try to explain this to you. JavaScript is not HTML. Already
mentioned in thread this cannot be done with HTML but would need
JavaScript. The problem is JavaScript is optional, so the usual caveats
apply. The functionality of the page *must* preserved if JavaScript is
not enabled. So the page should be in a fully readable state when
JavaScript is not present.
[1]
<style type="text/css">
<!--
^^^^^^
Stop putting HTML within STYLE elements. They are *not* required as so
many erroneously believe.
a:link {
color: #FFFFFF;
text-decoration:none;
}
a:visited {
color: #FFFFFF;
}
a:active {
color: #FF0000;
}
.green { color: #00CC00 }
-->
</style>
</head>
<body>
<a href=""><span style="color:black">[+] Hello! Me I am the first
^
Having an empty HREF is not a good idea, can have unwanted side effects.
Far better to attach an onclick handler directly to the element, in your
example it would be the SPAN, however I would think DIV of would be
more appropriate.
line.</span>
<br />
<br />
<span class="green">Here</span> is some more text.<br />
Here <span class="green">is</span> some more text.<br />
Here is <span class="green">some</span> more text.<br />
Here is some <span class="green">more</span> text.<br />
Here is some more <span class="green">text.</span><br /> </a>
^^^^
Hmm using XHTML? In most cases, this is a very bad idea which has been
discussed ad nauseam. If you using strict then your "document.writeln"
statements are a *no-no!* JavaScript is optional, functionality of the
page *must* preserved if JavaScript is not enabled.
</body>
[2]
<body>
<script type="text/javascript">
<!--
document.writeln('<table cellspacing="0" cellpadding="0">');
"document.writeln" are usually a bad idea, and in your application,
absolutely a bad idea. Why? Because if the client has JavaScript
disabled he will see *nothing*. Remember above?
<snip code>
If I where to recommend a way to do this here is the parameters that I
would say are appropriate.
1. Create the full *static* page with all elements in the visible and
readable state. This includes this initial state defined in the CSS,
remember CSS is optional too!
2. Put all your JavaScript in an *external* file.
3. Related to #2, do not pepper your markup with handler attributes,
i.e., all those "onclick=" but instead attach the handlers with your
functions in your JavaScript. Of course MS's contrariness means code forks!
function someClickHandler(){
...
}
function initClickHandler(targetID){
var target=documentGetElementBtId(targetID);
if(target){
if(target.addEventListener){ //modern browsers
target.addEventListener('click', someClickHandler, false);
}
else if(target.attachEvent){ //Old MS IE support
target.attachEvent('onclick', someClickHandler);
}
else {
//ain't supported so do nothing
}
}
}
// function to call all your event handler inits
function attachMyEvents(){
initClickHandler();
// any other init functions add to list
...
}
//now set to page loads to set it all up
// attach event after page loads
if( window.addEventListener ) {
window.addEventListener('load',attachMyEvents,false); //legacy DOM
} else if( document.addEventListener ) {
document.addEventListener('load',attachMyEvents,false); //proper DOM
} else if( window.attachEvent ) {
window.attachEvent('onload', attachMyEvents); //Damn IE only
}
