level
Events & Animations
Fact #3
“
In Stack overflow, There are 1,280,400 Questions tagged By JavaScript, 799,453
Questions tagged by jQuery, 212,184 Questions tagged by Angular, 151,868
Questions tagged by Node.js.
”
EVENTS
Event
Visitors Place Security Man
Actions Commands
Open Source Department – ITI
EVENTS
Event
Users
Visitors HtmlPlace
Element Security Man
Listener
Actions Commands
Open Source Department – ITI
EVENT LISTENERS | add
1 Inline Method
<button id=“myBtn” onclick=“alert(‘hello world’)”>click me!</button>
2 By AddEventListener Method
It will be covered later
Syntax:
addEventListener(event, function,[use capture])
Example:
var btn = document.getElementById(‘myBtn’);
btn.addEventListener(‘click’,myFunction);
Open Source Department – ITI
Illustrative Example
<body>
<p id=“msg”>Change My Color </p>
<input type=“button” id=“my-btn” value=“Submit”>
</body>
Change My Color
Submit
var btn = document.getElementById(‘my-btn’);
function clkFn(){
document.getElementById(“msg”).style.color=“green”;
}
btn.addEventListener(‘click’,clkFn);
Open Source Department – ITI
Illustrative Example
<body>
<p id=“msg”>Change My Color </p>
<input type=“button” id=“my-btn” value=“Submit”>
</body>
Change My Color
Submit
var btn = document.getElementById(‘my-btn’);
function clkFn(){
document.getElementById(“msg”).style.color=“green”;
}
btn.addEventListener(‘click’,clkFn);
Open Source Department – ITI
EVENT LISTENERS | remove
removeEventListener(event, function,[use capture])
Example
var btn = document.getElementById(‘myBtn’);
btn.addEventListener(‘click’,myFunction1);
btn.addEventListener(‘click’,myFunction2);
btn.removeEventListener(‘click’,myFunction2);
Open Source Department – ITI
MOUSE EVENTS
click dblclick contextmenu
mouseenter mouseleave
mousemove
Open Source Department – ITI
FORM EVENTS
| focus
Change Me
Submit
Open Source Department – ITI
FORM EVENTS
blur
Change Me
Submit
<input type="text" id="fname">
<script>
document.getElementById("fname").addEventListener("blur",myFunction);
function myFunction() {
alert("Input field lost focus.");
}
when you lose focus in this text input this called blur event and you can write anything
Open Source Department – ITI
FORM EVENTS
√ Change Me change
Submit
Open Source Department – ITI
FORM EVENTS
√ Change Me
Submit submit
Open Source Department – ITI
EVENT Object
Event Object is the object that contain all the data about the event occurred.
Event Object will be sent implicitly to Listener Function
open Source
var input = document.getElementById(‘my-inp’);
function blurFn(event){
var val = event.target.value;
console.log(val)
}
input.addEventListener(‘blur’,blurFn);
Open Source
Open Source Department – ITI
EVENT OBJECT | preventDefault
eventObj.preventDefault();
Example
var form = document.getElmentById(“my-form”)
var cb = function(e){
e.preventDefault();
}
form.addEventListener(“submit”, cb);
//When submit the form it will not submit the form values to the
action url
Open Source Department – ITI
KEY EVENTS
Triggered When User press the Key.
keydown It detects all keys
Triggered When User release the Key.
keyup It detects all keys
Triggered When User press the Key.
Keypress
It detects printed Characters only
Open Source Department – ITI
EVENT OBJECT | keyCode or which
eventObj.keyCode;
Example
var form = document.getElmentById(“my-form”)
var cb = function(e){
console.log(e.keyCode)
console.log(e.which)
}
form.addEventListener(“keyup”, cb);
// Return the ASSCII Code of the Character printed on the Key
Open Source Department – ITI
LOAD EVENTS
Report
What is load event?
What is beforeunload event?
What is DOMContentLoaded event?
What is difference Between load and
DOMContentLoaded ?
Note:
Support Your Answer by Examples.
Open Source Department – ITI
Animations
setInterval
setInterval(callback fn, duration [, param1,param2,…]);
Example
var cb = function(){
alert(“Hi, I’m DIV”);
}
setInterval(cb,3000);
var cb2 = function(name){
alert(“Hi, I’m ”+name);
}
setInterval(cb2, 3000, “Ahmed”);
Open Source Department – ITI
clearInterval
clearInterval(interval ID);
Example
var cb = function(){
alert(“Hi, I’m DIV”);
}
var interval = setInterval(cb,3000);
//interval is the Interval ID
clearInterval(interval);
Open Source Department – ITI
setTimeout
setTimeout(callback fn, duration [, param1,param2,…]);
Example
var cb = function(){
alert(“Hi, I’m DIV”);
}
setTimeout(cb,3000);
var cb2 = function(name){
alert(“Hi, I’m ”+name);
}
setTimeout(cb2, 3000, “Ahmed”);
Open Source Department – ITI
clearTimeout
clearTimeout(Timeout ID);
Example
var cb = function(){
alert(“Hi, I’m DIV”);
}
var timeout = setTimeout(cb,3000);
//timeout is the Timeout ID
clearTimeout(interval);
Open Source Department – ITI
OPERATORS | Type Fight No#3
Operator Description
ype of a variable
typeof Bub bling
Returns the t Capturing
instanceof Returns true i f an object is an instance of an
object type
Event Phases
Open Source Department – ITI
EVENT OBJECT | stopPropagation
eventObj.stopPropagation();
It will stop event propagation to the parent of the target element in
Bubbling Phase only.
Open Source Department – ITI
