Chapter 8: Event Handling

[markifornia 3]

This chapter discusses a topic on keyboard events. I have provided links to my dev website.

 

On page 284, the "change" event is added to the U.addEvent method.

 

 

U.addEvent(U.$('comments'), 'change', limitText);

 

 

http://www.sandiegowebcreative.com/text.html

 

 

On page 284, the "keyup" event is added to the U.addEvent method.

 

U.addEvent(U.$('comments'), 'keyup', limitText);

 

http://www.sandiegowebcreative.com/text2.html

 

 

I don't notice the difference between the two. I receive the same results from my browser, or I may not be noticing that which is obvious (or not as obvious?)

 

Anyone come across this?

[HartleySan 826]

Good question. In this case, I have a feeling that there is no noticeable difference between the two (but I could be wrong).

I noticed that the behavior is the same even when you hold a key down.

 

I suppose, in general, I would stick with the keyboard event handlers for pressing keys and use the change event handler for things like selecting items in a select element, etc.

[markifornia 3]

Thanks Hartley, could very well be the reason why on page 287, both events are passed to the function.

 

 

 
U.addEvent(U.$('comments'), 'keyup', limitText);
U.addEvent(U.$('comments'), 'change', limitText);

 

Page 288 goes into detail about accessibility with introducing a concept known as "pairing events". I guess the above is similar to the concept. 

 

 

 
<a href="somepage.html" id="link">Some Text</a>
 
// javascript:
 
addEvent(document.getElementById('link'), 'mouseover', doSomething);
addEvent(document.getElementById('link'), 'focus', doSomething);
 

 

I guess this makes some sense now. 

[HartleySan 826]

I'm actually not sure what's trying to be achieved on page 287. Sorry.

I think your second example though is just an example of attaching two events to the same element, which you may sometimes want to do.