Event Delegation, Bubbling etc with many functions having custom attributes.

[ghostcoder]

Ok, so I'm a fairly decent Javascript programmer and I've coded the majority of my functions from scratch along the way. However, I'm trying to get with the program here and separate as many event function calls from my HTML as possible. I'm also trying to decide if I should use Jquery or YUI or something, as opposed to writing everything myself. But that is a side question.

 

One thing that in my studying so far is that I don't understand how advanced Event Delegation and Bubbling will work in some scenarios.

 

For example, say I have a member search page and it displays 20 members at a time. Each member is in a DIV, but within that DIV, there is a small icon and if you hover over that icon, it triggers an onmouseover event. I currently have that event in line on the element. in short, it might looks something like this:

 

<img src='/skin/default/magnify.gif' class='magnify' alt='mag' border='0' 
onmouseover="showfloat('/img/24386/9533.jpg','User name','United States, Southeast', 24386);" onmouseout='hidefloat();' />

 

So, the showfloat function has info that is easily assigned to it when generated by PHP. Img, username, location, and member id.

 

Now, I suppose I could assign an event listener to every img with the class 'magnify'. Perhaps I could also create an ID tag for each of these images with the member ID. But how could I get all of the variables that I need to use in my showfloat function? I imagine I could do an AJAX call, but that wouldn't be nearly as fast as having all of that info preloaded in the page like I currently do.

 

In another situation, I have a stream of posts, similar to a forum or to FB.

Currently, I assign a lot of ID tags to DIVs using words along with an ID to identify which DIV I need for any particular javascript event.

 

//I have a DIV id that looks like this:
<div id='replyfield1234'></div>

//then, I have a bunch of events in the HTML linked to the ID. Couple of examples
onclick="doAddComment('addcomment', 1234); return false;" 
onblur='expandInput(this.id, 2, 117944);' //different ID for a reply

 

In this situation, when there are so many events going on for so many DIVs and sub elements, how do I assign event listeners to everything and manage to keep track of the IDs? I can't assign the same ID more than once, and I still need to keep track of every event element relating to a particular ID. As above & in some cases, I might want to pass more info than just an ID to a function triggered by the event.

 

Should I just wrap everything in a single parent labeled by an ID number? And then when events are triggered, I would somehow extract the ID of the parent in the Bubbling?

 

I was looking at Twitter and I saw they have unique IDs in their html code, such as:

 

data-tweet-id="2350143172699996##" data-item-id="2350143172699996##"

 

Not sure how these work, or how you would access them from Javascript.

 

If anyone has any feedback, I would appreciate it. I'm sure, like most programming things, once it really 'clicks' then I'll be off to the races.

 

 

 

[phpassassin]

It would be faster and better if you gonna use jquery.

 

When it comes to event delegations and bubblings, jquery is already enough.

 

    be careful of handling events on jquery, varions versions got different ways.