-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheventObject.html
95 lines (72 loc) · 3.47 KB
/
eventObject.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eventObject</title>
<style>
#demo{
width: 10vw;
height: 10vw;
border: 2px solid black;
}
</style>
</head>
<body>
<a href="#" id="hii"><button>Event Object</button></a>
<!--Mouse events: -->
<p class="para" onmousedown="mouseDown()" onmouseup="mouseUp()">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias praesentium, quidem necessitatibus adipisci commodi sed facere natus debitis, culpa sequi impedit voluptas vitae! Esse ratione qui atque fugiat ab cum rem dignissimos animi alias molestias enim in pariatur necessitatibus eligendi officiis consectetur aliquam cumque neque consequuntur voluptates beatae ipsa, minus quam? Corrupti suscipit nostrum veritatis excepturi veniam reiciendis magni quia, autem reprehenderit, natus, quae vitae inventore aliquid nihil nemo laborum qui tenetur molestias? Minima atque, minus optio neque tempora dolor. Neque cupiditate et nam aliquam eos amet excepturi quasi! Fugiat eum cum, ratione modi consequatur nulla debitis maxime totam quaerat!</p>
<p id="demo"></p>
<!--Keyboard events: occurs whe user presses a key on keyboard: -->
<p>A function get triggered when user presses a key in the input field: </p>
<br>
<label for="test">Testing</label>
<input type="text" name="test" id="test" onkeypress="keyPress()" onkeydown="keyDown()" onkeyup="keyUp()">
<br>
<p id="test-Keyboard"></p>
<script>
let obj = document.getElementById('hii');
// case 1
// obj.addEventListener('mousemove', function () {
// console.log("Hii\n");
// }, false);
// case2
let chackEvent = () => {
alert("mouse out alert is called in event\n")
console.log(event);
console.log(event.target);
console.log(event.type);
document.body.style.background = "red";
};
obj.addEventListener('mouseout', chackEvent);
// mouse events:
const mouseDown = () =>{
console.log(document.getElementsByClassName("para"));
var v = document.querySelector(".para").innerHTML;
console.log(v);
document.querySelector(".para").style.color = "red";
};
const mouseUp = () =>{
console.log(document.getElementsByClassName('para'));
console.log(document.querySelector('.para').innerHTML);
document.querySelector('.para').style.background = "black";
document.querySelector('.para').innerHTML = "Hii Pratham";
};
// demo : keyboard events
const mEnter = document.getElementById("demo");
mEnter.addEventListener('mouseenter', () => {
mEnter.innerHTML = "Hii Pratham";
});
const keyPress = () => {
document.getElementById("test-Keyboard").innerHTML = `keyPress: ${event.key} and it's code is ${event.code}`;
};
const keyDown = () => {
document.getElementById("test-Keyboard").innerHTML = "keyDown";
};
const keyUp = () => {
document.getElementById("test-Keyboard").innerHTML = "keyUp";
};
</script>
</body>
</html>