By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,870 Members | 1,212 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,870 IT Pros & Developers. It's quick & easy.

addEventListener Problem

P: 8
Using Firefox, I am trying to access a link within my HTML document, then use addEventListener() to add a click event to that link. I am using two external JS files.

ajaxModal.js has the listener function which will be called when the link is clicked.

events.js will have all the addEventListener() functions.

ajaxModal.js contents:

Expand|Select|Wrap|Line Numbers
  1. function showAjaxModal()
  2. {
  3. xmlHttp = GetXmlHttpObject();
  4. if(xmlHttp==null)
  5.   {
  6.   alert ("Browser does not support HTTP Request");
  7.   return;
  8.   }
  9. alert('Accessed showAjaxModal!');
  10. }
  11. // Detect XMLHTTP
  12. function GetXmlHttpObject()
  13. {
  14. var xmlHttp=null;
  15. try
  16.  {
  17.  // Firefox, Opera 8.0+, Safari
  18.  xmlHttp=new XMLHttpRequest();
  19.  }
  20. catch (e)
  21.  {
  22.  // Internet Explorer
  23.  try
  24.   {
  25.   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  26.   }
  27.  catch (e)
  28.   {
  29.   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  30.   }
  31.  }
  32. return xmlHttp;
  33. }

events.js contents:


Expand|Select|Wrap|Line Numbers
  1. var triggerLink = document.getElementById('page1');
  2. triggerLink.addEventListener('click',showAjaxModal,false);
HTML:

[HTML]
<html>
<head>
...
<script type="text/javascript" src="scripts/events.js"></script>
<script type="text/javascript" src="scripts/ajaxModal.js"></script>
...
</head>
<body>
...
<div id="nav">
<ul>
<li><a href="index.html" onclick="showAjaxModal(); return false">Home</a></li>
<li><a id="page1" href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
...
</body>
</html>
[/HTML]

The inline event handler works, and runs showAjaxModal()....

the second link with ID 'page1' does not run showAjaxModal(), spite the fact that I added a click event to it with addEventListener in events.js.

I am almost sure this is a beginner mistake. How can I get the addEventListener() to work on this page?

Thanks,

Jeremy
Apr 30 '07 #1
Share this Question
Share on Google+
6 Replies


iam_clint
Expert 100+
P: 1,208
why not

triggerLink.addEventListener('click',showAjaxModal ,false);

to
triggerLink.onClick = function() { showAjaxModal(); }
Apr 30 '07 #2

P: 8
why not

triggerLink.addEventListener('click',showAjaxModal ,false);

to
triggerLink.onClick = function() { showAjaxModal(); }
I am getting the same result with your suggested method. I have tried both. Both methods for registering the event do not work. I click the link, and it just loads the href as normal, and ignores any click events ... I am trying to find a typo in my scripts, but everything looks legit to my knowledge. I am hoping someone can find my error, because I cannot see it.

I am choosing to learn addEventListener() because I want to get a jump start on the addEventListener() method. Using the 'traditional' method of registering event handlers doesn't allow to add more than one event handler to the same event on the same element (not that I would need to in this case) which is a drawback (see ppk-Quirksmode http://www.quirksmode.org/js/events_tradmod.html). I have decided that event registration with addEventListener() is supported enough in modern browsers for my purposes (with the condition for using IE attachEvent() of course).

However, I would also like to get it working using your suggested method, because it is not working that way either.

I tried,

Expand|Select|Wrap|Line Numbers
  1. var triggerLink = document.getElementById('page1');
  2. triggerLink.onClick = function() { showAjaxModal(); }
with no success.

Thanks for your suggestion.
Apr 30 '07 #3

iam_clint
Expert 100+
P: 1,208
you need it to drop the href and make your javascript goto the link after it pulls the javascript function.


window.location =

<a href="#">
Apr 30 '07 #4

P: 8
you need it to drop the href and make your javascript goto the link after it pulls the javascript function.


window.location =

<a href="#">


I could be way off base with this, but I am very confused. I want the href to be followed if JS is off, but if JS is on, I want the showAjaxModal to execute. When using your suggestion of <a href="#">, this link becomes broken to users who do not have javascript turned on. Is there a way to get around that, other than using an inline event handler with return false (ie. <a href="page1.html" onclick="func(); return false">Page 1</a>) ?

This inline method is working, but I prefer to create a link that does not use inline event handling, because ideally I want to maintain a pure separation of xhtml content and javascript behavior. Quirksmode says, "Although the inline event registration model is ancient and reliable, it has one serious drawback. It requires you to write JavaScript behavior code in your XHTML structure layer, where it doesn't belong." [1 ]

Is there a way to make this link accessible to folks with JS turned off, without using inline events?

Thanks again,
Jeremy
Apr 30 '07 #5

P: 8
Seems like I may be confused. I'll do a little reading. It's time to get our JS reference books for a while. Let me know if you have any advice.

Thanks!

Jeremy
May 1 '07 #6

iam_clint
Expert 100+
P: 1,208
yes

have the javascript write all of your links to # then if javascript it is turned off you don't have to worry about it.
May 1 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.