EventListeners and 'this'

EventListeners and 'this'

Post by LayneMitch » Fri, 18 Jul 2008 13:21:13


Greetings.

I'm cross referencing another book that's introducing a new or more
"appropriate" way of assigning functions to links, div's..etc. I needed an
explanation on this example:

This example displays some text when mousing over a link. The text displayed
is specifically styled in CSS. The following code references a js file that
makes 'event listeners' browser compatible.

The 'title' attribute of the 'anchor' tag has text that the JS code pulls
from to display it when moused over.

HTML/CSS Code (main part)

<p><a class="federation" title="Read more..." href="...">James Tiberius
Kirk</a> ....(more text)...<a class="federation" title="Read more..." href="..
">NCC-1701</a> ...



JavaScript Code (assuming <script type="text/javascript" src="core.
js"></script>)

var Tooltips =
{
init: function()
{
var links = document.getElementsByTagName ("a");

for (var i = 0; i < links.length; i++)
{
var title = links[i].getAttribute("title");

if (title && title.length > 0)

{

Core.addEventListener(
links[i], "mouseover", Tooltips.showTipListener);
Core.addEventListener(
links[i], "focus", Tooltips.showTipListener);
Core.addEventListener(
links[i], "mouseout", Tooltips.hideTipListener);
Core.addEventListner(
links[i], "blur", Tooltips.hideTipListener);
}
}

},

showTip: function(link)

{

Tooltips.hideTip(link);


var tip = document.createElement ("span");
tip.className = "tooltip";
var tipText = document.createTextNode(link.title);
tip.appendChild(tipText);
link.appendChild(tip);

link._tooltip = tip;
link.title = " ";

// Fix for Safari2/Opera9 repaint issue
document.documentElement.style.position = "static";

}

},

hideTip: function(link)

{

if (link._tooltip)

{

link.title= link._tooltip.childNodes[0].nodeValue;
link.removeChild(link._tooltip);
link._tooltip = null;

// Fix for Safari2/Opera9 repaint issue

document.documentElement.style.position = "static";
}
}

showTipListener: function(event)

{

Tooltips.showTip(this);
Core.preventDefault(event);

},

hideTipListener: function(event)

{
Tooltips.hideTip(this);
}
};

Core.start (Tooltips);


My questions are:

1. In the showTipListener: function(event), what does 'this' in Tooltips.
showTip(this) represent? Does it represent just 'any' of the links in the
"links" array at the beginning of the code? Or does it represent only the
links with the 'title' attribute?

2. What's the purpose of this line: link.title = link._tooltip.childNodes[0].
nodeValue;
Why would I need to know the value of the node in order to get rid of it?
Couldn't they have done away with that line?

3. Isn't the next line ( link._tooltip = null; ) overkill? So this is saying
that after I get rid of it I want to make sure it's gone and nothing is left
so I set that space to blank?

--
Message posted via WebmasterKB.com
http://www.yqcomputer.com/
 
 
 

EventListeners and 'this'

Post by SAM » Fri, 18 Jul 2008 17:06:39

ayneMitch via WebmasterKB.com a crit :

I see in section (method) 'init' of function Tooltip:

Core.addEventListener(
links[i], "mouseover", Tooltips.showTipListener);
^^^^^^^^
==> each link receive an 'onmouseover' with function showTipListener
(method 'showTipListener' of 'Tooltips')

then I see in section 'showTipListener' :

function(event) { Tooltips.showTip(this)

==> almost equal to do :

links[i].onmouseover = function() { showTips(this); };

or to have :
<a onmouseover="showTips(this);"
where 'this' is the link (this specific link)



We are now in the section 'hideTip' that's to say 'onmouseout'
The title of the link has to be fed back with content of _tooltip
because on mouse over the function made something as:
_tooltip = '<span>' + link.title + '</span'>;
link.title = " "; // the title of the link is now empty
see section : 'showTip'


because _tooltip.innerHTML is not smart ? ;-)


certainly not !


The object _tooltip is at this time of no use
so, yes, overkilling it to free memory (CPU)
I'm not sure it is necessary if there is not much links.


--
sm

 
 
 

EventListeners and 'this'

Post by Laser Lip » Fri, 18 Jul 2008 17:17:24

My Implementation

http://www.yqcomputer.com/
 
 
 

EventListeners and 'this'

Post by RobG » Fri, 18 Jul 2008 20:52:25

n Jul 17, 2:21m, "LayneMitch via WebmasterKB.com" <u39402@uwe>
wrote:
> gt;{
> var links = document.getElementsByTagName (>a">;
>
> for (var<i = 0; i < links.leng>h; i++)> > {
> ar title = links[i].getAttr>bu>e("title");
>
> f (t>tle &> t>tle.length>> >)
>
>
>
> gt;ore.addEventListener(
> links[i], ">ouseover", Tooltips.showTipListe>er);
> ore.addEventListener(
> gt;links[i], "focus", Tooltip>.showTipListener);
> ore.addEventListener(
> ore.>ddEventList>er(
> > gt;gt;li>ks[i], "blur", Tooltips.hideTip>is>ener);
> }
>> >>,
>
> howTip: function(link)
>
>
> Toolt>ps.hideTip(link);
>
> var tip = document.creat>Element ("span");
> ti>.className = "tooltip";
> gt;> var tipText = document.cr>ateTextNode(link.title); >> > tip.appendChild(tipText);
> > link.appendChild(tip);
>
> link._tooltip = tip>
>
> / Fix fo> S>fari2/O>er>9 repaint issue
> > gt;ocument.>oc>mentElement.style.position = "static";
>
> }
>> > ,
>
> hideTip: functio>(link)
>
>
>
> > gt;f (link._tooltip)
>
>
>
> gt;> link.title= link._tooltip.childNodes[0].nodeValue;
> > li>k.rem>ve>hild(link._tooltip);
> link._t>ol>ip = nu>l;> >
> / Fix for Safari2/>pera9 repaint issue
>
> oc>me>t.docume>tE>ement.style.position = "static";
> > gt;
> >
>
> howTipListener> functi>n(even>) >>
>
>
> >oo>tips.showTip(this); >> > Core.preventDefault(event);
>
> ,
>
> hideTipListener> function(event)
>
> {
> Tooltips.hideTip(this);
>
> };
>
> ore.start (Tooltips);
>
> My questions are:
>
> 1. In the showTipListener: function(event), what does 'this' in Tooltips.
> showTip(this) represent?

Given the rest of the showTip code maps the value to a variable called
'link' and the default beha>iour of the addEventListener method, it
likely is > reference to the link that the listener was assigned too.

However, that >s a bit of a guess given that the code for
core.addEventListener is not posted.


> Does it represent just 'any' of the links in the
> "links" array at the beg>nning of the code? Or does it represent only the
> links with the 'title' attri>ute?

It seems that the listener is only placed on links that have a title
attribute of something other than an empty string.


> 2. What's the purpose of this line: link.title = link._tooltip.childNodes[0].
> nodeValue;

The showTip function sets th> value of the title property to ' ' just
after it copies the value to the tooltip span element, I guess to stop
the default tool t>p from being displayed. The above line sets it
back to its original value.


> Why would I need to know the value of the node in order to get r>d of it?

You don't, that's not why it's done (see above).


> Couldn't they have done away with that line?

Yes, but then next time the>e will be no useful >itle attribute and
the tooltip will be ' '.


> 3. Isn't the next line ( li>k._tooltip = null; ) overkill?

It performs no useful function that I can see, removeChild is
sufficient.


> So this is saying
> that after I get rid of it I want to make sure it's gone and nothing is left
> so I set that space to blank?

Where there is a possibility that a closure may form a circular
reference, it is helpful to ensure there is no cir
 
 
 

EventListeners and 'this'

Post by LayneMitch » Fri, 18 Jul 2008 21:15:10


This is why I mentioned at the beginning the code is referencing "core.js"..
the book's script library.


Okay...thanks. I figured I was right about that. It reps the element that
called the function.


Perfect explanation! I've got it now. So in order to create the "link.
_tooltip = tip", it had to pull the current title from the link and set the
original to " " ...so that it won't be displayed by default. Then when you
hide the "link._tooltip = tip", it reads the value of the title and sets the
original back to this title with the line "link.title = link._tooptip.
childNodes[0].nodeValue;" If I didn't have this line then the original would
always be blank and the code will only work once. Cool....

Appreciate that RobG and SAM

--
Message posted via http://www.yqcomputer.com/