From the course: JavaScript: Enhancing the DOM (2013)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Handling clicks
In the last movie, we were able to center these images inside the overlay but there is no way of getting rid of them. If I try in to click on any of these, nothing happens. So I need to check for an event when I click on these images that gets rid of the overlay and the image and shows the background. So let me go ahead and do that. I'm going to come of here and into my code. And right here I'm going to addEventListener to the largeImage. So, largeImage and addEventListener. I want to listen for a click here and once the click happens, execute a function and that function is going to do some stuff. I also need to make sure that I pass it false so that it bubbles properly. And in here I need to check that this is going to happen only when the overlay exists. If the overlay exist what I want to do is remove the overlay. To remove the overlay, you have to use the removeChild function. You have to remember that removeChild doesn't work on the node itself. It works on the parent of the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
What we'll build2m 16s
-
(Locked)
Adding a bubbling event listener4m 11s
-
(Locked)
Creating and styling an overlay with JavaScript4m 39s
-
(Locked)
Adding an image3m 48s
-
(Locked)
Resizing images in the DOM2m 59s
-
(Locked)
Centering an image2m 36s
-
(Locked)
Handling clicks1m 29s
-
(Locked)
Adjusting for scrolling1m 36s
-
Detecting and adjusting for a window resize2m 40s
-
(Locked)
-