The actions to which JavaScript can respond are called Events. An Event is some notable action to which a script can respond.
Mouse Event
| click | onclick |
| mouseover | onmouseover |
| mouseout | onmouseout |
| mousedown | onmousedown |
| mouseup | onmouseup |
| mousemove | onmousemove |
onclick event
Example
<html>
<head>
<script>
function what() {
alert('hello student');
}
</script>
</head>
<body>
<button type="button" onclick="what()">Click me</button>
</body>
</html>
output
Before click : Click me
After click : hello student
onmouseover Event
Example
<html>
<head>
<script>
function what() {
alert('hello student');
}
</script>
</head>
<body>
<button type="button" onmouseover="what()">Click me</button>
</body>
</html>Output
Before click : Click me
After click : hello student
onmouseout event
Example
<html>
<head>
<script>
function what() {
alert('hello student');
}
</script>
</head>
<body>
<button type="button" onmouseout="what()">Click me</button>
</body>
</html>Output
Before click : Click me
After click : hello student
onmousedown event and onmouseup event
Example
<html>
<body>
<h1 id="what" onmousedown="mouseDown()" onmouseup="mouseUp()">
hello student, i am a rahul verma
</h1>
<script>
function mouseDown() {
document.getElementById("what").style.color = "brown";
}
function mouseUp() {
document.getElementById("what").style.color = "blue";
}
</script>
</body>
</html>Output
before Output
after Output
onmousemove event
Example
<html>
<body>
<h1 id="what" onmousemove="mouseDown()">
hello basic Engineer
</h1>
<script>
function mouseDown() {
document.getElementById("what").style.color = "brown";
}
</script>
</body>
</html>Output :
before output
After output
Keyboard Event
| keydown | onkeydown |
| keyup | onkeyup |
| keypress | onkeypress |
onkeydown Event
Example
<html>
<body>
<h1>keydown</h1>
<input type="text" onkeydown="what()">
<script>
function what() {
alert("hello student");
}
</script>
</body>
</html>
Output
onkeyup Event
example
<html>
<body>
<h1>The keyup Event</h1>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
let x = document.getElementById("fname");
}
</script>
</body>
</html>
Output
onkeypress
Example
<html>
<body>
<h1>keypress event</h1>
<input type="text" onkeypress="what()">
<script>
function what() {
alert("click here");
}
</script>
</body>
</html>
Output
Document Event
| load | onload |
| resize | onresize |
| unload | onunload |
| blur | onblur |
onload Event
example
<html>
<body onload="what()">
<h1>basic engineer</h1>
<script>
function what() {
alert("Page is loaded");
}
</script>
</body>
</html>
Output
AJAX
It is stand for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and JavaScript. Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display. Conventional web application transmit information to and from the server using synchronous request. AJAX is most viable RIA technology so far.
How AJAX Work
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about JavaScripts Event please check Wikipedia Click here
Stay Connected Stay Safe. Thank you
0 Comments