Posted By
Bajarangi soft ,
Posted On 12-10-2020
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Event Methods jQuery SyntaxIn jQuery, most DOM events have an equivalent jQuery method.To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event fires. You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
Commonly Used jQuery Event Methods
$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.
click()
The click() method attaches an event handler function to an HTML element.The function is executed when the user clicks on the HTML element.The following example says: When a click event fires on a <p> element; hide the current <p> element:
Example(1)
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Which Are The Event Methods Used In JQuery With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
body {
background: black;
}
</style>
<body>
<div class="container">
<br>
<div class="text-center">
<h2 id="color" style="color: White">Event Methods Used In JQuery </h2>
</div>
<br>
<br>
<div class="well">
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>