-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path49.1 EventListener in JS.html
88 lines (82 loc) · 4.26 KB
/
49.1 EventListener in JS.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
<!DOCTYPE html>
<html lang="en">
<head><title>EventListener in JS</title>
</head>
<style>
#box{
height: 100px;
width: 100px;
background-color: teal;
}
</style>
<body>
<!-- visit: https://www.w3schools.com/jsref/met_document_addeventlistener.asp and
https://youtu.be/QedZL8kXX6Y
https://www.geeksforgeeks.org/javascript-addeventlistener-with-examples/#:~:text=The%20addEventListener()%20is%20an,element.
->An event listener is a procedure in JavaScript that waits for an event to occur.
The simple example of an event is a user clicking the mouse or pressing any key on the keyboard.
->The addEventListener() is an inbuilt function in JavaScript which takes the event to listen
for, and a second argument to be called whenever the described event gets fired.
Any number of event handlers can be added to a single element without overwriting existing event handlers.
Syntax: element.addEventListener(event, listener, useCapture);
Parameters:
event : event can be any valid JavaScript event.Here Events are used without “on” prefix like use “click” instead of “onclick” or “mousedown” instead of “onmousedown”.
listener(handler function) : It can be a JavaScript function which respond to the event occur.
useCapture: It is an optional parameter used to control event propagation. A boolean value is passed where “true” denotes capturing phase and “false” denotes the bubbling phase.
-->
<button id="btn1">Click btn1</button>
<button id="btn2">Change Me</button>
<button id="btn3">Click for Hover</button>
<p id="Text">Hover over this Text !</p>
<b id="effect"></b>
<div id="box"">
<p id="boxText"></p>
</div>
<script>
//Example-1
document.getElementById("btn1").addEventListener('click',()=>{
console.log("clicked via addEventListener()");
})
//Example-2
document.getElementById("btn2").addEventListener('click',(myevent)=>{
//myevent can be called anything like event, e,.. etc i.e it can be any name
//myevent (passed in function): myevent refers to the button
myevent.target.textContent="You change Me!";
//here myevent is like this, example: : this.style.backgroundColor='green'
})
//Example-3
let x=document.getElementById("btn3");
let y=document.getElementById("Text");
x.addEventListener("click",Clicked);
y.addEventListener('mouseover',mousehoverin);
y.addEventListener('mouseout',mousehoverout);
function Clicked(){
document.getElementById("effect").innerHTML="Click Event";
}
function mousehoverin(){
document.getElementById("effect").innerHTML="MouseHoverIn Event";
}
function mousehoverout(){
document.getElementById("effect").innerHTML="MouseHoverOut Event";
}
//or
// document.getElementById("btn3").addEventListener('click',()=>{
// document.getElementById("effect").innerHTML="Clicked!";
// })
// document.getElementById("Text").addEventListener('mouseover',()=>{
// document.getElementById("effect").innerHTML="MouseHoverIn Event"+"<br>";
// })
// document.getElementById("Text").addEventListener('mouseout',()=>{
// document.getElementById("effect").innerHTML="MouseHoverOut Event"+"<br>";
// })
//multiple eventlisteners to div element with id box
document.getElementById("box").addEventListener('mouseover',()=>{
document.getElementById("box").style.backgroundColor="blue"
})
document.getElementById("box").addEventListener('click',()=>{
document.getElementById("boxText").innerHTML="You clicked me!"
document.getElementById("boxText").style.color="white"
})
</script>
</body>
</html>