event handler attachment

J

Jonathan N. Little

Event handlers attached by 'addEventListener' do not seem to pass values
in time to cancel form submission unlike the methods that it is supposed
to replace. In an attempt to keep the markup as clean as possible, I add
the handlers from the attached javascript page and I have noticed the
trouble. Small demo to illustrate:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Attached Events</title>

<script type="text/javascript">
function cancelIt(){
alert("This should cancel the form submission");
return false;
}

function init(){
var e = document.getElementById('findme');
if(e.addEventListener){
e.addEventListener('click', cancelIt, false);
}
else if(_s.attachEvent){ //MS IE support
a.attachEvent("onclick", cancelIt);
}
e = document.getElementById('me2');
e.onclick=cancelIt;
}

//attach event after page loads
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else if(window.attachEvent){
window.attachEvent("onload", init);
}
</script>

</head>
<body>
<script type="text/javascript">
alert("Do your have a query string" + location.search);
</script>

<form method="get">
<div>
<input type="hidden" name="test" value="posted">
Hard coded the old way not desirable, JS in markup<br>
<input type="submit" value="Hard Coded" onclick="return cancelIt()">
<hr>
Attached by addEventListener does pass the FALSE in time
<br><input type="submit" value="By Listener" id="findme">
<hr>
Ok, effect, not hard coded, but does not append but replace handlers
<br><input type="submit" value="Direct Dot Coded" id="me2">
</div>
</form>
</body>
</html>
 
N

Neredbojias

To further the education of mankind, "Jonathan N. Little"
Event handlers attached by 'addEventListener' do not seem to pass values
in time to cancel form submission unlike the methods that it is supposed
to replace. In an attempt to keep the markup as clean as possible, I add
the handlers from the attached javascript page and I have noticed the
trouble. Small demo to illustrate:
Click to expand...

I think you should put the j/s which is in <head> in <body>, right before
</body>.
 
T

Toby Inkster

Jonathan said:
e = document.getElementById('me2');
e.onclick=cancelIt;
[...]
Ok, effect, not hard coded, but does not append but replace handlers
<br><input type="submit" value="Direct Dot Coded" id="me2">
Click to expand...

I've never been a fan of addEventListener and generally use the method
above. Of course, with the code you've used, you'll stomp over any
existing e.onclick function. The solution is along these lines:

var oldfunc = e.onclick;
if (typeof e.onclick != 'function')
e.onclick = cancelIt;
else
e.onclick = function()
{
oldfunc();
cancelIt();
}
 
J

Jonathan N. Little

Neredbojias said:
To further the education of mankind, "Jonathan N. Little"


I think you should put the j/s which is in <head> in <body>, right before
</body>.
Click to expand...
I think you miss the point, the attempt is not to have any j/s
references within to body akin to not having presentational markup and
inline style in the body.
 
M

Martin Jay

Jonathan N. Little said:
Event handlers attached by 'addEventListener' do not seem to pass
values in time to cancel form submission unlike the methods that it is
supposed to replace. In an attempt to keep the markup as clean as
possible, I add the handlers from the attached javascript page and I
have noticed the trouble. Small demo to illustrate:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Attached Events</title>

<script type="text/javascript">
function cancelIt(){
alert("This should cancel the form submission");
return false;
}
Click to expand...

PreventDefault();

There's some information about it and the IE alternative at:
<http://www.howtocreate.co.uk/tutorials/javascript/domevents>
 
H

Harlan Messinger

Jonathan said:
Event handlers attached by 'addEventListener' do not seem to pass values
in time to cancel form submission unlike the methods that it is supposed
to replace. In an attempt to keep the markup as clean as possible, I add
the handlers from the attached javascript page and I have noticed the
trouble. Small demo to illustrate:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Attached Events</title>

<script type="text/javascript">
function cancelIt(){
alert("This should cancel the form submission");
return false;
}

function init(){
var e = document.getElementById('findme');
if(e.addEventListener){
e.addEventListener('click', cancelIt, false);
}
else if(_s.attachEvent){ //MS IE support
a.attachEvent("onclick", cancelIt);
Click to expand...

What are _s and a?
 
J

Jonathan N. Little

Martin said:
And in particular this near the bottom of the page:

"Preventing the default action"

Looks like it does what you want.
Click to expand...

Thanks Martin, right on where the problem lies... The damn thing about
it this not only is it necessary to create a fork in the code to
accommodate IE in attaching the event, but I either have to have to
create two separate functions (an IE function and the rest of the web
browsers function) or fork the code in the in the function itself! There
are times when I'd like to tell Bill where he can stick his IE.
 
J

Jonathan N. Little

Harlan said:
What are _s and a?
Click to expand...

Just me being sloppy in cutting down the code from the actual
development site to the "example" code in the post. (Prime example why a
URL is better than pasted code). The original code added several events
for a JavaScript pre-check evaluation of a form prior to submission.


Should have been:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Attached Events</title>

<script type="text/javascript">
function cancelIt(){
alert("This should cancel the form submission");
return false;
}

function init(){
var e = document.getElementById('findme');
if(e.addEventListener){
e.addEventListener('click', cancelIt, false);
}
else if(e.attachEvent){ //MS IE support
e.attachEvent("onclick", cancelIt);
}
e = document.getElementById('me2');
e.onclick=cancelIt;
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else if(window.attachEvent){
window.attachEvent("onload", init);
}
</script>

</head>
<body>
<script type="text/javascript">
alert("Do your have a query string" + location.search);
</script>
<form method="get">
<div>
<input type="hidden" name="test" value="posted">
Hard coded the old way not desirable, JS in markup
<br>
<input type="submit" value="Hard Coded" onclick="return cancelIt()">
<hr>
Attached by addEventListener does pass the FALSE in time
<br>
<input type="submit" value="By Listener" id="findme">
<hr>
Ok, effect, not hard coded, but does not append but replace handlers
<br>
<input type="submit" value="Direct Dot Coded" id="me2">
</div>
</form>
</body>
</html>
 
N

Neredbojias

To further the education of mankind, "Jonathan N. Little"
I think you miss the point, the attempt is not to have any j/s
references within to body akin to not having presentational markup and
inline style in the body.
Click to expand...

Apparently so. Never even heard of 'addEventListener' or 'attachEvent'
before. Will have to bone up on that.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Uhhhhh, What can I do next? 6
I dont get this. Please help me!! 2
Image upload not working in browser 4
Reversing output of user input by using while loop... 2
Registration Form 7
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
How can I hide a div using an event listener on multiple checkboxes? 6
How can I remove the specific error message after regex validation is done? 1

Members online

Total: 27 (members: 1, guests: 26)
Robots: 516

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top