خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

DOM2 - Event handling and use of getElementById question

Hello
I have read the regulations and think I am posting in the correct spot. If I am not please let me know as it is my first post. Likewise if posting really novice questions is frowned upon let me know and I won't repeat.

I have been striving to to learn about Event handlers . 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/Co...%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 ruing 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:

Thank you .
-------------------------------------
Event capturing vs. Event bubbling

here is the naked code:
Code:
<html>
<head>
 <title>Event capturing vs. Event bubbling</title>
 <style>
 #theText {font-size: 18px;}
 h1 {
 border:1px solid #000;
 background-color: #dadada;
 }
 #capEvent, #bubEvent {
 background-color: #666;
 }
 </style>
 <script>
 // wait until the window is loaded before registering
the events
 window.addEventListener('load',registerEvents,false);
 /**
 Registers onclick events
 */
 function registerEvents(e){
document.getElementById("capTitle").addEventListener
('click',makeTiny,true);
document.getElementById("capEvent").addEventListener
('click',makeHuge,true);
document.getElementById("bubTitle").addEventListener
('click',makeTiny,false);
document.getElementById("bubEvent").addEventListener
('click',makeHuge,false);
 }
 function makeHuge(e){
 console.log("making the text huge");
 document.getElementById("theText").style.fontSize =
"80px";
 }
 function makeTiny(e){
 console.log("making the text tiny");
 document.getElementById("theText").style.fontSize =
"10px";
 }
 </script>
</head>
<body>
 <h1 id="capTitle">Event <span id="capEvent">capturing
</span></h1>
 <h1 id="bubTitle">Event <span id="bubEvent">bubbling
</span></h1>
 <p id="theText">Hello, Events!</p>
</body>
</html>

برچسب: نویسنده: آیلین رضوانی تاريخ: سه شنبه 20 تير 1396 ساعت: 4:56

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه