Event handler and the getElementbyID interaction in listing 11-4


This is a listing (# 11-4) in the Coding with Javascript for dummies book- page 177. (see below). ( from: http://pdf.th7.cn/down/files/1508/Coding%20with%20JavaScript%20For%20Dummies.pdf )

I can't quite get how it works, as it seems that the two main functions, makeHuge & makeTiny work on the element

with ID "the Text" and not the< h1> and elements that have the "capEvent" and "bubEvent" IDs.

I tries running this code in Mozilla, Edge, Explorer and Opera. The result was a static image and no clicking was possible anywhere (contrary to the registerEvents(e) function executable commands.
my 2 questions if anyone has the spare time to look at this are:

1- why is the result of this code run in a browser static? (is it just me??)
2- Maybe someone could explain to me how the addEventListener is working here via the getElementBy IDs in makeHUge (e) and makeTiny (e) ??

I have read and reread the thing but since I have just srated learning the even handling my ignorance is much vaster than my understanding so I am stuck ! :slight_smile:

Event capturing vs. Event bubbling

#theText {font-size: 18px;}
h1 {
border:1px solid #000;
background-color: #dadada;
#capEvent, #bubEvent {
background-color: #666;

Event capturing

Event bubbling

Hello, Events!


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.