├── bubble.html
├── comment-box.html
├── delegate.html
├── event-summary.html
├── github.html
├── index.html
├── js
└── events.js
├── more-events.html
└── summary.html
/bubble.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Event Bubble
8 |
22 |
23 |
24 | Exploring Event Bubble
25 |
26 |
27 | Lorem, ipsum.
28 | At, repudiandae.
29 | Explicabo, dolorem.
30 | Veritatis, perspiciatis!
31 | Accusantium, officia.
32 | Quam, quibusdam!
33 |
34 |
35 |
59 |
60 |
--------------------------------------------------------------------------------
/comment-box.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Add New Comment
8 |
9 |
10 | Please add your comment
11 |
16 |
17 |
18 | Post
20 |
21 |
42 |
43 |
--------------------------------------------------------------------------------
/delegate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Event Delegate
8 |
9 |
10 | Explore Event Delegate
11 |
12 |
13 | Lorem, ipsum dolor.
14 | Facilis, repellendus ullam!
15 | Pariatur, quo beatae.
16 | Iure, accusamus explicabo!
17 | Reprehenderit, suscipit minus!
18 | Earum, dolores eius?
19 |
20 | Add Item
21 |
22 |
46 |
47 |
--------------------------------------------------------------------------------
/event-summary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | JS DOM Summary
8 |
9 |
10 | Final DOM Event Handlers
11 | Default Text
12 | Default Input text
13 | Update
15 | Handle Event by Add onclick Function
18 | Handle event by addEventListener
19 |
40 |
41 |
--------------------------------------------------------------------------------
/github.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
8 |
9 |
10 | My secret info
11 | Delete
13 |
29 |
30 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | JS DOM EVENTS
8 |
9 |
10 | DOM er ajke special events
11 | Click Me
12 | Another button
13 | Make Yellow
15 |
16 | Make Red
17 |
18 | Make Blue
19 | Make Purple
20 |
21 | Make Pink
22 | Make Green
23 | Make goldenRod
24 |
25 |
28 |
29 |
--------------------------------------------------------------------------------
/js/events.js:
--------------------------------------------------------------------------------
1 | // option 1: directly set on the HTML element
2 | // Another button
3 |
4 | // option 2: add onclick function on the html element
5 | // IMPORTANT: We will use this
6 | // Make Red
7 | function makeRed() {
8 | document.body.style.backgroundColor = 'red';
9 | }
10 |
11 | // option: 3
12 | const makeBlueButton = document.getElementById('make-blue');
13 | makeBlueButton.onclick = makeBlue;
14 |
15 | function makeBlue() {
16 | document.body.style.backgroundColor = 'blue';
17 | }
18 |
19 |
20 | // option: 3 another
21 | const purpleButton = document.getElementById('make-purple');
22 | purpleButton.onclick = function makePurple() {
23 | document.body.style.backgroundColor = 'purple'
24 | }
25 |
26 | // option: 4
27 | const pinkButton = document.getElementById('make-pink');
28 | pinkButton.addEventListener('click', makePink);
29 |
30 | function makePink() {
31 | document.body.style.backgroundColor = 'pink';
32 | }
33 |
34 | // option: 4 another
35 | const makeGreenButton = document.getElementById('make-green');
36 | makeGreenButton.addEventListener('click', function makeGreen() {
37 | document.body.style.backgroundColor = 'green';
38 | });
39 |
40 | // option: 4 Final
41 | // IMportant: We will use this sometimes
42 | // document.getElementById('make-goldenrod').addEventListener('click', function(){})
43 | document.getElementById('make-goldenrod').addEventListener('click', function(){
44 | document.body.style.backgroundColor = 'goldenrod';
45 | })
46 |
--------------------------------------------------------------------------------
/more-events.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | More Events
8 |
9 |
10 | Explore More events
11 | Events
12 | Summary: Event handlers
8 |
9 |
10 | Explore DOM Events
11 | Make Green
12 | Make yellow
13 |
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque aperiam autem nisi ipsam suscipit fugit quisquam earum atque inventore eos eligendi quasi repudiandae vel dicta, libero expedita voluptatem nemo perspiciatis odit officiis. Molestias consequuntur excepturi maiores reprehenderit qui explicabo, quidem fugit voluptatibus officiis, facilis voluptates deserunt, non quod ratione quisquam?
13 |Soluta dolores iure consectetur vel laboriosam quia nihil ut eveniet mollitia nostrum numquam quas explicabo voluptates amet, laborum architecto totam quos voluptatum quaerat? Itaque est reiciendis excepturi qui, id quisquam, vero asperiores nemo earum eos molestiae eaque ex quaerat provident! Sequi voluptas dolorem impedit accusamus repellendus laudantium eveniet rerum laborum!
14 |Doloremque eius commodi pariatur? Ea, libero doloribus temporibus eos exercitationem, quo sed vero quaerat eveniet alias fuga quas, fugit porro quod sit. Tempore rem aliquam id culpa dolorem voluptatum cum illo labore. Non, fuga sapiente, iure ab, dicta deserunt magni illo sunt explicabo expedita cupiditate voluptatem consequatur voluptate nobis doloribus.
15 |