Event handler and the getElementbyID interaction in listing 11-4

Community Off Topic
1

Hello
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??)
and
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!

2

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