Skip to content

Commit b4d4d57

Browse files
nainimarunainimaru
committed
event basics
1 parent 9126695 commit b4d4d57

4 files changed

Lines changed: 112 additions & 0 deletions

File tree

‎08_events/eventbasics.js‎

Whitespace-only changes.

‎08_events/one.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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>htnml Events </title>
7+
</head>
8+
<body style="background-color: #414141; color: aliceblue;">
9+
<h2>Amazing image</h2>
10+
<div >
11+
<ul id="images">
12+
<li><img width="200px" id="photoshop" src="https://images.pexels.com/photos/3561339/pexels-photo-3561339.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="photoshop"></li>
13+
<li><img width="200px" id="japan" src="https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt=""></li>
14+
<li><img width="200px" id="river" src="https://images.pexels.com/photos/3532551/pexels-photo-3532551.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt=""></li>
15+
<li><img width="200px" id="owl" src="https://images.pexels.com/photos/3532552/pexels-photo-3532552.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="" ></li>
16+
<li><img width="200px" id="prayer" src="https://images.pexels.com/photos/2522671/pexels-photo-2522671.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt=""></li>
17+
<li><a style="color: aliceblue;" href="https://google.com" id="google">Google</a></li>
18+
</ul>
19+
</div>
20+
</body>
21+
<script>
22+
// document.getElementById('owl').onclick = function(){
23+
// alert("owl clicked")
24+
// }
25+
26+
// attachEvent()
27+
// jQuery - on
28+
29+
// type, timestamp, defaultPrevented
30+
// target, toElement, srcElement, currentTarget,
31+
// clientX, clientY, screenX, screenY
32+
// altkey, ctrlkey, shiftkey, keyCode
33+
34+
// document.getElementById('images').addEventListener('click', function(e){
35+
// console.log("clicked inside the ul");
36+
// }, false)
37+
38+
// document.getElementById('owl').addEventListener('click', function(e){
39+
// console.log("owl clicked");
40+
// e.stopPropagation()
41+
// }, false)
42+
43+
// document.getElementById('google').addEventListener('click',function(e){
44+
// e.preventDefault();
45+
// e.stopPropagation()
46+
// console.log("google clicked");
47+
// }, false)
48+
49+
50+
document.querySelector('#images').addEventListener('click', function(e){
51+
console.log(e.target.tagName);
52+
if (e.target.tagName === 'IMG') {
53+
console.log(e.target.id);
54+
let removeIt = e.target.parentNode
55+
removeIt.remove()
56+
}
57+
58+
59+
})
60+
61+
//removeIt.parentNode.removeChild(removeIt)
62+
</script>
63+
</html>

‎08_events/three.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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>Document</title>
7+
</head>
8+
<body>
9+
<h1>Chai aur Javascript</h1>
10+
<button id="start">Start</button>
11+
<button id="stop">Stop</button>
12+
</body>
13+
<script>
14+
const sayDate = function(str){
15+
console.log(str, Date.now());
16+
}
17+
18+
const intervalId = setInterval(sayDate, 1000, "hi")
19+
20+
clearInterval(intervalId)
21+
</script>
22+
</html>

‎08_events/two.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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>Document</title>
7+
</head>
8+
<body>
9+
<h1>Chai aur code</h1>
10+
<button id="stop">Stop</button>
11+
</body>
12+
<script>
13+
const sayHitesh = function(){
14+
console.log("Hitesh");
15+
}
16+
const changeText = function(){
17+
document.querySelector('h1').innerHTML = "best JS series"
18+
}
19+
20+
const changeMe = setTimeout(changeText, 2000)
21+
22+
document.querySelector('#stop').addEventListener('click', function(){
23+
clearTimeout(changeMe)
24+
console.log("STOPPED")
25+
})
26+
</script>
27+
</html>

0 commit comments

Comments
 (0)