Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 5365d88

Browse files
committedJun 21, 2024
events
1 parent d914b25 commit 5365d88

File tree

6 files changed

+114
-0
lines changed

6 files changed

+114
-0
lines changed
 

‎Events/11.png

120 KB
Loading

‎Events/12.png

111 KB
Loading

‎Events/13.png

140 KB
Loading

‎Events/14.png

335 KB
Loading

‎Events/15.png

55.9 KB
Loading

‎Events/1st.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Events in Javascript | By Malik waseem</title>
7+
</head>
8+
<body style="background-color: #212121; color: #fff">
9+
<h2>Amazing Images</h2>
10+
<ul id="Images">
11+
<li><img src="./11.png" alt="cisco" width="200px" id="cisco" /></li>
12+
<li>
13+
<img src="./12.png" alt="cmnd" width="200px" id="cmnd" />
14+
</li>
15+
<li><img src="./13.png" alt="vlan" width="200px" id="vlan" /></li>
16+
<li><img src="./14.png" alt="dynamic" width="200px" id="dynamic" /></li>
17+
<li><img src="./15.png" alt="lock" width="200px" id="lock" /></li>
18+
<li>
19+
<a
20+
href="https://google.com"
21+
style="color: aqua"
22+
target="_blank"
23+
id="google"
24+
>google</a
25+
>
26+
</li>
27+
</ul>
28+
</body>
29+
<script>
30+
console.log("js is working");
31+
// document.getElementById("cmnd").onclick = function () {
32+
// alert(" command image is clicked");
33+
// // };
34+
35+
// document.getElementById("cmnd").addEventListener(
36+
// "click",
37+
// function () {
38+
// alert("command images is clicked"); //best way to write .
39+
// },
40+
// false
41+
// );
42+
43+
//attachEvent.. Early time when internet explore pe run krna hota tha ...
44+
//onEventListener .... Early in Jquery
45+
46+
//type,timeStamp, preventDefault..
47+
//target ,toElement ,sourceElement ..currentTarget
48+
//clientX ,clientY,screenX ,screenY ,tiltX ,tiltY
49+
//altKey,cntrlKey,shiftKey ,keycode
50+
51+
// document.getElementById("cmnd").addEventListener(
52+
// "click",
53+
// (e) => {
54+
// console.log(e);
55+
// // console.log(e.timeStamp);
56+
// //console.log(e.altKey); //false
57+
// // console.log(e.clientX, e.clientY); //141 259
58+
// },
59+
// false
60+
// );
61+
62+
// document.getElementById("Images").addEventListener(
63+
// "click",
64+
// function (e) {
65+
// console.log("clicked inside the ul"); //2nd call
66+
// },
67+
// false
68+
// );
69+
// document.querySelector("#cmnd").addEventListener(
70+
// "click",
71+
// function (e) {
72+
// console.log("command images is clicked"); //1st call
73+
// //e.stopPropagation //in this sense bubbling up will not happen!!
74+
// },
75+
// false
76+
// ); //bubbling up which means inside to outside ..or otherway to
77+
//promote from downgrade to upgreade.
78+
79+
// document.getElementById("Images").addEventListener(
80+
// "click",
81+
// function (e) {
82+
// console.log("clicked inside the ul"); //1st call
83+
// },
84+
// true
85+
// );
86+
// document.querySelector("#cmnd").addEventListener(
87+
// "click",
88+
// function (e) {
89+
// console.log("command images is clicked"); //2nd call
90+
// },
91+
// true
92+
// ); // capturing ...which means that top to bottom ...
93+
94+
// document.getElementById("google").addEventListener("click", function (e) {
95+
// console.log("google is clicked "); //it is using bubbling up
96+
// e.preventDefault();
97+
// e.stopPropagation(); //now capturing.
98+
// });
99+
100+
//Removing any Li....
101+
102+
document.querySelector("#Images").addEventListener("click", function (e) {
103+
//console.log(e.target); //return us img tag
104+
//console.log(e.target.parentNode); //give us parent which is li.
105+
106+
if (e.target.tagName == "IMG") {
107+
const removeNode = e.target.parentNode;
108+
removeNode.remove(); //removed..
109+
}
110+
111+
//removeNode.parentNode.removeChild(removeNode);
112+
});
113+
</script>
114+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.