<---- Event In JavaScript ---->
4 way to write events in javascript
What is event Object?
Mouse events in JavaScript
Keyboard events in JavaScript
InputEvents in JavaScript
What is Events?
HTML Events are "Things" that happen to HTML elements.
When JavaScript is used in HTML pages,JavaScript can "react" on these events.
HTML Events
An HTML Events can be something the browser does,or something a user does.
Here are some examples of HTML events:
An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked
Often, when events happen, you may want to do something.
javaScript lets you execute code when wvents are detected.
HTML allows event handler attributes, with JavaScript code,
to be added to HTML Elements.
👉 Four ways to writing Events in JavaScript:-
1. using Inline events alert();
2. By calling a function (we already seen and most common way of writing).
3. using Inline events (HTML onClick="" property and element.onClick)
4. using Event Listeners (addEventListeners and IE's attachEvent)
a.
onClikc="alert"("Hello")
b.
const funcName = () => {
alert("Hello");
}
c.
const thirdway = document.getElementById("idName");
thirdway.onClick = function(){
alert("Hello");
}
d. we can use addEventListners multiple times , no override issue.
const fourthway = document.querySelector(#idName);
fourthway.addEventListner('click',() => {
alert("Hello");
})
👉 What is Event Object ?
Event object is the parent object of the event object.
for example
MouseEvent, FocusEvent, KeyboardEvent etc.
👉 Mouse Event In JavaScript :-
The MouseEvent Object
Events that occur when the mouse interacts with the HTML
document belongs to the MouseEvent Object.
👉 Keyboard Event in JavaScript :-
Event that occur when user pressed a key on the keyboard,
belongs to the KeyboardEvent object.
👉 Input Events in JavaScript:-
The onChange event occurs when the value of an element has been changed.
For radiobutton and checkboxes, the onChange event occurs when the
checked state has been changed.
HTML EXAMPLE
<html>>
<body>
<label for="">your name</label>
<input type="text" name="" id="ice">
<br>
<label>Choose an Ice Cream Flavor
<select name="icecreams" id="iceCreams" onchange="selectElement()">
<option value="">choose ice cream</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<br>
<div id="result"></div>
<script>
const selectElement = ()=>{
const inputChange = document.getElementById('ice').value;
const iceCreams = document.getElementById('iceCreams').value;
const result = document.getElementById('result');
result.innerHTML = `Mr ${inputChange} select ${iceCreams} ice-cream flavour`;
console.log(`${inputChange} and ${iceCreams}`);
}
second method without inline code
const iceCreams = document.getElementById('iceCreams');
iceCreams.addEventListener('change', ()=>{
const inputChange = document.getElementById('ice').value;
const iceCreams = document.getElementById('iceCreams').value;
const result = document.getElementById('result');
result.innerHTML = `Mr ${inputChange} select ${iceCreams} ice-cream flavour`;
})
</script>
</body>
</html>
Interview Q :-
what is difference between addEventListner and onClick ?
addEventListner doesnot overwrtie existing event handler,
whereas onclikc overrides the existing onclick = fn event handlers.
onClick will work everywhere , whereas addEventListner doesn't work in Internet
explorer before version 9.
