event capturing

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

event capturing

Post by kendall »

Hey guys,

I'm using javascript's addEventListener to add an onclick event to an <a> link

Code: Select all

Spry.$$('a.action').addEventListener('click',function,true);
the thing about it is I have

Code: Select all

<a herf="javascript&#058;void(0)" class="action"><img src="" /></a>
and what is happening is that I'm not getting the click event to execute.

now if I did

Code: Select all

<a herf="javascript&#058;void(0)" class="action">View</a>
I would get it. But not with an img tag in the a tag. I'm don't understand thing whole capturing and bubbling aspect a whole lot but I was trying to capture the event to see if I can "reverse" up the DOM node tree to access the <a> from the <img> clicked (so i added the event to the <img> instead of the <a>) but I get

Code: Select all

element.parentNode // gives me 'javascript&#058;void(0)'
Is there something I'm missing here...? how do I get the parent <a> of a clicked <img> tag?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: event capturing

Post by JAB Creations »

Nothing beats a good example and I think this example should serve you well. :)

I've setup a couple of arrays for both keyboard event capturing for the menus on Version 2.9 of my website, see jabcreations.net for a preview. The mouse obviously simply uses CSS though I haven't tested IE6 for drop down support though that's something I'll eventually get around to. Essentially if you tab (key on your keyboard) to the menus and press any key other then tab it will expand the menus for you because of the following event listeners. This works just fine in all browsers including IE and works even when served as application/xhtml+xml without any errors or warnings. Most importantly it does not rely on any third party modules (frameworks) so you won't be stuck checking if it still works if you update the framework you were coding to. I'll subscribe in case you have any questions...the arrays are in an id, id, class format just in case you're wondering.

Code: Select all

<script type="text/javascript">
//<![CDATA[
function accessibility_menus()
{
 var a1k =['a1k','b1','ba list'];
 var b11k=['b11k','c11','cb'];
 var b12k=['b12k','c12','cb'];
 var b13k=['b13k','c13','cb'];
 var a2k= ['a2k','b2','bb list'];
 var b21k=['b21k','c21','cb'];
 var a3k= ['a3k','b3','bb list'];
 var b31k=['b31k','c31','cb'];
 var a4k= ['a4k','b4','ba list'];
 var a5k= ['a5k','b5','ba list'];
 var b51k=['b51k','c51','cb'];
 var a6k= ['a6k','b6','ba list'];
 var b61k=['b61k','c61','cb'];
 var b62k=['b62k','c62','cb'];
 var b63k=['b63k','c63','cb'];
 var a7k= ['a7k','b7','ba list'];
 var a8k= ['a8k','b8','ba list'];
 var a9k= ['a9k','b9','ba list'];
 var menus_keypress=new Array(a1k,b11k,b12k,b13k,a2k,b21k,a3k,b31k,a4k,a5k,b51k,a6k,b61k,b62k,b63k,a7k,a8k,a9k);
 
 var c11b= ['c11b','c11','hidden'];
 var c12b= ['c12b','c12','hidden'];
 var c13b= ['c13b','c13','hidden'];
 var a1b = ['a1b','b1','list hidden'];
 var a2b = ['a2b','b2','list hidden'];
 var c31b= ['c31b','c31','hidden'];
 var a3b = ['a3b','b3','list hidden'];
 var a4b = ['a4b','b4','list hidden'];
 var c51b= ['c51b','c51','hidden'];
 var a5b = ['a5b','b5','list hidden'];
 var c61b= ['c61b','c61','hidden'];
 var c62b= ['c62b','c62','hidden'];
 var c63b= ['c63b','c63','hidden'];
 var a6b = ['a6b','b6','list hidden'];
 var a7b = ['a7b','b7','list hidden'];
 var a8b = ['a8b','b8','list hidden'];
 var a9b = ['a9b','b9','list hidden'];
 var menus_blur=new Array(c11b,c12b,c13b,a1b,a2b,c31b,a3b,a4b,c51b,a5b,c61b,c62b,c63b,a6b,a7b,a8b,a9b);
 
 //onkeypress
 for (var i=0; i<menus_keypress.length; i++)
 {
  var m1 = 'menu';
  var m2 = m1 + menus_keypress[i][0];
  
  if (window.addEventListener && document.getElementById(m2))
  {
   var object = document.getElementById(m2);
   object.addEventListener('keypress',accessibility_menus_keyboard,false);
   object.event_id = m2;
   object.event_id = menus_keypress[i][1];
   object.event_class = menus_keypress[i][2];
  }
  else if (document.getElementById(m2) && event.keyCode != 9)
  {
   var object = document.getElementById(m2);
   object.attachEvent('onkeypress',accessibility_menus_keyboard);
   object.event_id = menus_keypress[i][1];
   object.event_class = menus_keypress[i][2];
  }
 }
 
 //onblur
 for (var i=0; i<menus_blur.length; i++)
 {
  var m1 = 'menu';
  var m2 = m1 + menus_blur[i][0];
  
  if (window.addEventListener && document.getElementById(m2))
  {
   var object = document.getElementById(m2);
   object.addEventListener('blur',accessibility_menus_keyboard,false);
   object.event_id = m2;
   object.event_id = menus_blur[i][1];
   object.event_class = menus_blur[i][2];
  }
  else if (document.getElementById(m2))
  {
   var object = document.getElementById(m2);
   object.attachEvent('onblur',accessibility_menus_keyboard);
   object.event_id = menus_blur[i][1];
   object.event_class = menus_blur[i][2];
  }
 }
}// End accessibility_menus();
 
 
function start()
{
// add all your functions you wish to call here for the onload event.
accessibility_menus();
}
window.onload = start;
//]]>
</script>
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Re: event capturing

Post by kendall »

seems to be some php errors on your site mate :dubious:

not seeing how this actually pertains to my dilema...please do explain
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: event capturing

Post by pickle »

Try setting the last parameter to false, which will trigger the event in the bubbling phase. I'm not 100% sure about the whole bubbling/capturing stuff either, but I think that may be what you want.

Also, using the "herf" attribute may be less useful than "href" ;)
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Re: event capturing

Post by kendall »

pickle wrote:Try setting the last parameter to false, which will trigger the event in the bubbling phase. I'm not 100% sure about the whole bubbling/capturing stuff either, but I think that may be what you want.

Also, using the "herf" attribute may be less useful than "href" ;)

well I did try using false and true....no luck....ha@herf that an obvious typo...come on man...come on :drunk:
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: event capturing

Post by pickle »

Try giving the <a> an ID, then use document.getElementByID('that ID') to access the element - maybe Spry is overwriting or changing the behaviour of addEventListener()?

If you have Firebug installed, put:

Code: Select all

console.dir(element)
in the function that gets called. That'll dump all the properties of the element - might let you learn something about what's going on.

I'm not sure what ~JAB was getting at with his example, but it did illustrate that addEventListener() doesn't work in IE (6 at least).
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: event capturing

Post by JAB Creations »

Just trying to provide a closely relating working example from which kendall can rewrite for his own purposes. :)

I've always have been overjoyed to find code that works close enough to what I want and then being able to get past being stuck by adapting new bits of code as I go along. So I will try to provide related examples that people can adapt for their own needs when I think it may be useful for them.
Post Reply