Skip to content

Commit 6f4948f

Browse files
tahirajannattahirajannat
committed
DOM event object
1 parent da15bef commit 6f4948f

File tree

4 files changed

+235
-0
lines changed

4 files changed

+235
-0
lines changed

‎domEvent.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
<link rel="stylesheet" href="styles/dom.css" />
8+
</head>
9+
<body>
10+
<div id="my-div" class="div1">
11+
I am a div
12+
<p>my div</p>
13+
<button class="btn">btn1</button>
14+
<button class="btn">btn2</button>
15+
<button class="btn">btn3</button>
16+
</div>
17+
18+
<textarea name="" id="" cols="30" rows="10"></textarea>
19+
20+
<input type="text" name="" id="" />
21+
22+
<div>
23+
<p class="para">
24+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
25+
Deleniti quibusdam, natus eligendi fugiat accusamus at quaerat
26+
magnam quia repellat, dignissimos nostrum eaque ipsum
27+
repellendus quam, officia eum hic perferendis voluptatem?
28+
</p>
29+
</div>
30+
31+
<div class="dragDrop"></div>
32+
<h2 draggable="true" id="drag1">I am Tahira Jannat</h2>
33+
34+
<script src="scripts/domEvent.js"></script>
35+
</body>
36+
</html>

‎scripts/domEvent.js

+188
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
//MouseEvent object - <html>,<head>, <meta>, <title>, <br>,<style>, <script>,<iframe>,<param>,<base>, <bdo>
2+
/*
3+
1. onclick
4+
2. ondblclick
5+
3. onmousedown
6+
4. onmouseup
7+
5. onmousemove
8+
6. onmouseleave
9+
7. onmouseover
10+
8. onmouseenter
11+
*/
12+
console.clear();
13+
const div = document.querySelector('div');
14+
console.log(div);
15+
div.addEventListener('click', function (e) {
16+
// console.log('clicked');
17+
console.log(e.target);
18+
console.log(e.target.id);
19+
console.log(e.target.className);
20+
console.log(e.target.innerHTML);
21+
console.log(e.target.innerText);
22+
console.log(e.target.textContent);
23+
});
24+
div.addEventListener('dblclick', function () {
25+
console.log('dblclick occured ');
26+
});
27+
28+
div.addEventListener('mousedown', function () {
29+
console.log('onmousedown occured ');
30+
});
31+
div.addEventListener('mouseup', function () {
32+
console.log('mouseup occured ');
33+
});
34+
35+
div.addEventListener('mouseenter', function () {
36+
console.log('mouseenter occured ');
37+
});
38+
div.addEventListener('mouseleave', function () {
39+
console.log('mouseleave occured ');
40+
});
41+
42+
div.addEventListener('mouseover', function () {
43+
console.log('mouseover occured ');
44+
});
45+
div.addEventListener('mousemove', function (e) {
46+
// console.log('mousemove occured ');
47+
console.log('clientX: ' + e.clientX);
48+
console.log('clientY: ' + e.clientY);
49+
console.log('offsetX: ' + e.offsetX);
50+
console.log('offsetY: ' + e.offsetY);
51+
});
52+
53+
////
54+
const buttons = document.querySelectorAll('.btn');
55+
// console.log(buttons);
56+
Array.from(buttons).map((btn) => {
57+
btn.addEventListener('click', function (e) {
58+
console.log(e.target.innerText);
59+
});
60+
});
61+
62+
//KeyboardEvent Object
63+
/*
64+
1. Keydown - pressing a key, can repeat
65+
2. KeyPress (may not supported by some browsers)
66+
3. Keyup
67+
//some properties - key, keyCode, code, shiftKey, altKey, repeat
68+
*/
69+
const textarea = document.querySelector('textarea');
70+
textarea.addEventListener('keydown', function (e) {
71+
console.log('keydown');
72+
if (e.repeat) {
73+
alert('do not repeat');
74+
}
75+
});
76+
textarea.addEventListener('keypress', function () {
77+
console.log('keypress');
78+
});
79+
textarea.addEventListener('keyup', function (e) {
80+
console.log('keyup: ' + e.key);
81+
console.log('keyup: ' + e.keyCode);
82+
console.log('keyup: ' + e.code);
83+
console.log('keyup: ' + e.shiftKey);
84+
if (e.shiftKey) {
85+
console.log('shift + ' + e.key);
86+
}
87+
});
88+
89+
//Focus Object Events
90+
/*
91+
<br>, <head>, <title>, <html>,<iframe>, <meta>, <param>, <script>, <style>, <base>, <bdo>
92+
93+
1. onblur
94+
2. onfocus
95+
3. onfocusin
96+
4. onfocusout
97+
*/
98+
99+
const focusDiv = document.querySelector('input');
100+
focusDiv.addEventListener('blur', function (e) {
101+
console.log('blur');
102+
focusDiv.style.backgroundColor = 'transparent';
103+
focusDiv.style.padding = '0';
104+
// console.log(e.target.value);
105+
focusDiv.value = e.target.value.toUpperCase();
106+
});
107+
focusDiv.addEventListener('focus', function () {
108+
console.log('focus');
109+
focusDiv.style.backgroundColor = 'tomato';
110+
focusDiv.style.padding = '2rem';
111+
});
112+
focusDiv.addEventListener('focusin', function () {
113+
console.log('focusin occured');
114+
});
115+
focusDiv.addEventListener('focusout', function () {
116+
console.log('focusout');
117+
// e.target.value.style.font
118+
});
119+
120+
//ClipboardEvent Object Events
121+
/*
122+
1. oncopy
123+
2. oncut
124+
3. onpaste
125+
*/
126+
const para = document.querySelector('.para');
127+
128+
focusDiv.addEventListener('copy', function () {
129+
console.log('copied');
130+
para.innerHTML = 'You have copied';
131+
});
132+
focusDiv.addEventListener('cut', function () {
133+
console.log('cut');
134+
para.innerHTML = 'You have cut';
135+
});
136+
focusDiv.addEventListener('paste', function () {
137+
console.log('pasted');
138+
para.innerHTML = 'You have pasted';
139+
});
140+
141+
//DragEvent Object Events
142+
/*
143+
1. ondrag
144+
2. ondragend
145+
3. ondragenter
146+
4. ondragleave
147+
5. ondragover
148+
6. ondragstart
149+
7. ondrop
150+
*/
151+
152+
const dragEl = document.querySelector('h2');
153+
const dragDiv = document.querySelector('.dragDrop');
154+
155+
dragEl.addEventListener('dragstart', (e) => {
156+
console.log('drag started');
157+
e.dataTransfer.setData('Text', e.target.id);
158+
});
159+
160+
dragDiv.addEventListener('dragover', (e) => {
161+
e.preventDefault();
162+
console.log('ondragover');
163+
});
164+
165+
dragDiv.addEventListener('drop', (e) => {
166+
console.log('drop');
167+
let id = e.dataTransfer.getData('Text');
168+
console.log('id: ', id);
169+
dragDiv.appendChild(document.getElementById(id));
170+
e.preventDefault();
171+
});
172+
173+
// dragEl.addEventListener('dragleave', (e) => {
174+
// console.log('ondragleave');
175+
// e.dataTransfer.setData('Text', e.target.id);
176+
// });
177+
// dragEl.addEventListener('dragenter', (e) => {
178+
// console.log('ondragenter');
179+
// e.dataTransfer.setData('Text', e.target.id);
180+
// });
181+
// dragEl.addEventListener('dragend', (e) => {
182+
// console.log('ondragend');
183+
// e.dataTransfer.setData('Text', e.target.id);
184+
// });
185+
// dragEl.addEventListener('drag', (e) => {
186+
// console.log('ondrag');
187+
// e.dataTransfer.setData('Text', e.target.id);
188+
// });

‎styles/dom.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
div {
2+
background-color: tomato;
3+
height: 12rem;
4+
width: 12rem;
5+
}
6+
.dragDrop {
7+
margin-top: 20px;
8+
height: 20rem;
9+
width: 20rem;
10+
}

‎styles/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,5 @@
4949
}
5050
div {
5151
margin-top: 20px;
52+
/* background-color: tomato; */
5253
}

0 commit comments

Comments
 (0)