├── bubble.html
├── comment.html
├── delegate.html
├── event-common.html
├── event.html
├── js
└── events.js
├── more-events.html
└── summary.html
/bubble.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Event Bubble
9 |
10 |
11 |
12 | Event Bubble vai
13 |
14 | Bubble vai list
15 |
16 | Lorem, ipsum.
17 | Minus, ducimus!
18 | Facilis, voluptates.
19 | Nemo, sunt?
20 | Reiciendis, aliquid!
21 | Nesciunt, excepturi!
22 |
23 |
24 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/comment.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Comment
9 |
10 |
11 |
12 | Add your comment, Please!!
13 |
14 | Your comments
15 |
24 |
25 |
26 |
29 |
30 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/delegate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Event Delegate
9 |
10 |
11 |
12 | Event Delegate
13 |
14 | Lorem, ipsum.
15 | Tempore, distinctio!
16 | Iste, omnis?
17 | Facere, adipisci?
18 | Molestiae, nemo!
19 | Molestiae, eius.
20 |
21 | Add Item
22 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/event-common.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
9 |
10 |
11 |
12 |
13 |
14 | update
16 | Just function
17 | direct add Event Listener
18 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/event.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Events
9 |
10 |
11 |
12 | Event niye Clickbaji
13 | Click Me: Yellow
14 | Click me: Red
15 | Click me: Blue
16 | Click me: Green
17 | Click me: Golden rod
18 | Click me: hot pink
19 | Click me: Light Blue
20 |
21 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/js/events.js:
--------------------------------------------------------------------------------
1 | function makeRed() {
2 | document.body.style.backgroundColor = 'red';
3 | }
4 |
5 | // handle blue button click by setting function name
6 |
7 | const blueButton = document.getElementById('make-blue-button');
8 | // just set the name of the function
9 | blueButton.onclick = makeBlue;
10 |
11 | function makeBlue() {
12 | document.body.style.backgroundColor = 'blue';
13 | }
14 |
15 | // handle event using anonymous function
16 | const greenButton = document.getElementById('make-green-button');
17 | // anonymous function
18 | greenButton.onclick = function () {
19 | document.body.style.backgroundColor = 'green';
20 | }
21 |
22 | // handle by using add eventlisenter
23 | const goldenButton = document.getElementById('make-goldenrod');
24 | goldenButton.addEventListener('click', makeGoldenRod);
25 |
26 | function makeGoldenRod() {
27 | document.body.style.backgroundColor = 'goldenrod';
28 | }
29 |
30 | // addEventListener
31 | const hotPinkButton = document.getElementById('make-hotpink');
32 | hotPinkButton.addEventListener('click', function () {
33 | document.body.style.backgroundColor = 'hotpink';
34 | })
35 |
36 | // direct shortcut
37 | document.getElementById('light-blue').addEventListener('click', function () {
38 | document.body.style.backgroundColor = 'lightblue';
39 | })
--------------------------------------------------------------------------------
/more-events.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
9 |
10 |
11 |
12 | More Events
13 |
18 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/summary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Event summary
9 |
10 |
11 |
12 |
13 | Click me: Green
15 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos veniam aspernatur totam id adipisci, 17 | voluptate a. Architecto nesciunt aliquid, laudantium iste nihil saepe at deleniti, porro culpa neque 18 | distinctio ad?
19 |Vero sint exercitationem ad quasi explicabo esse quae dignissimos aperiam, mollitia rerum eligendi 20 | dolorem porro vel perferendis! Quidem, autem quasi! Deleniti totam odit officia esse suscipit nam fugit 21 | ipsum numquam!
22 | 23 |