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

How do you use Firebug to examine an event listener

Claus Mygind
100+
P: 571
I am starting to use

".addEventListener("click",function(){alert('click ')},false);"

In the older method where the event handler was assigned in the html code like onClick = "...", it is easy in Firebug to right click on the element and examine the assignment.

With the addEventListener, I can examine the element and I can see the assignment in the DOM tab, but I cannot see the action assigned to the element.

I currently have a button I have assigned a listener to but the action does not execute. What is the best way to trace this down?

Here is the assignment code.

Expand|Select|Wrap|Line Numbers
  1.     this.makeTable = 
  2.         function (nodeId)
  3.         {
  4.             document.getElementById( nodeId ).innerHTML = 
  5.             '<form id="'+nodeId+'Form">'+
  6.             '    <table id="insideTable" class="insideTable" style="padding:0px; margin:0px;" width="100%"; height="100%";> '+
  7.             '        <tr><td id="titleBar"> '+
  8.             '            <button'+ 
  9.             '                type="button" id="'+nodeId+'Close" '+ 
  10.             '                style="padding:0px; float:right; background-color:blue,color:yellow;">'+
  11.             '                <img src="/exp/images/closeButton.gif" style="height:16px;width:16px;">'+
  12.             '            </button>'+
  13.             '        </td></tr><tr><td> '+
  14.             '            <table class="insideTable" id="aPadTable" name="aPadTable" align="center"> '+
  15.             '                <tbody id="'+nodeId+'Data" ></tbody>'+
  16.             '            </table>'+
  17.             '        </td></tr> '+
  18.             '    </table>'+
  19.             '</form>';
  20.  
  21.             //add onclick event handler to close button
  22.             var pButton = document.getElementById( nodeId+'Close' );
  23.  
  24.             if (pButton.addEventListener)
  25.             {
  26.             pButton.addEventListener("click",function(){g.nodeMgr.removeNode(nodeId)},false);
  27.             };
  28.         };
  29.  
It is suppose to run this code.
Expand|Select|Wrap|Line Numbers
  1.     this.removeNode =    
  2.         function (nodeId)
  3.         {
  4.             var elem = document.getElementById(nodeId);
  5.             elem.parentNode.removeChild(elem);
  6.         };
  7.  
  8.  
Could this possibly be a timing issue?

I have other buttons on my menu bar with similar assignment methods and they work fine.
Sep 7 '11 #1

✓ answered by Dormilich

With the addEventListener, I can examine the element and I can see the assignment in the DOM tab, but I cannot see the action assigned to the element.
install EventBug (available through the FireBug site), this will give you an additional Event tab which also lists the functions to execute.

Share this Question
Share on Google+
4 Replies


Dormilich
Expert Mod 5K+
P: 8,639
With the addEventListener, I can examine the element and I can see the assignment in the DOM tab, but I cannot see the action assigned to the element.
install EventBug (available through the FireBug site), this will give you an additional Event tab which also lists the functions to execute.
Sep 7 '11 #2

Claus Mygind
100+
P: 571
@Dormilich
Is this the add on you are talking about?
Firebug Paint Events
Sep 7 '11 #3

Claus Mygind
100+
P: 571
Never mind, I found the correct file.

Thanks again for your wonderful advice.
Sep 7 '11 #4

Dormilich
Expert Mod 5K+
P: 8,639

Post your reply

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