jQuery Events
jQuery Tutorial » jQuery Events
What are jQuery events?
JQuery events are actions that can be detected by your web application used to create dynamic web pages.
An event shows the exact moment when something happens.
Here are some examples of events:
- mouse click,
- mousedown,
- mouseup,
- selecting a radio button,
- loading a webpage,
- scrolling a webpage
Syntax to assign a click event to all paragraphs on a page, you can do this:
Syntax:
Then to define what should happen when the event fires pass a function to the event:
// action goes here!!
});
jQuery click() event - Example
When a user clicks on the HTML element then the function is executed.
We have the next example: When a user click event fires on a <p> element; then hide <p> element:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me I will disappear.</p>
<span style="background:#3CF">Click me and surprise I am fix !</span>
<p>Click me too and you will not see me</p>
<p>Click me too!</p>
</body>
</html>
The above example will displays first only HTML text with <p> tag, then click "Click me to hide paragraphs" to hide all elements with <p> tag.
Related subjects:
jQuery Attributes
jQuery syntax
jQuery selectors
Tags: jquery events : liat, for input type text, on dinamically added elements, on, click, not firing, tutorial, event change, mouseover
What are jQuery events?
Does jQuery have an event object?
What are the 8 types of JavaScript events?
Why jQuery is used to wire events?
What is jQuery click event?
What is jQuery event delegation?
jQuery change() event - Example
change() event occurs when the value of an item has been changed (this will works only for <input>, <text>, and <select> elements). For example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("The text has been changed.");
});
});
</script>
</head>
<body>
<input type="text">
<p>in the input field write something, then click outside the field or press enter.</p>
</body>
</html>
In the example above, the $(document).ready() is an event that is used to manipulate a page safely with the jQuery.
jQuery hover() event - Example
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
First function mouseenter() is executed when the mouse enters the HTML item, and mouseleave() is executed when the mouse leaves the HTML item:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">Click This paragraph and notice what's going on.</p>
</body>
</html>
jquery events : liat, for input type text, on dinamically added elements, on, click, not firing, tutorial, event change, mouseover
What are jQuery events?
Does jQuery have an event object?
What are the 8 types of JavaScript events?
Why jQuery is used to wire events?
What is jQuery click event?
JQuery Events - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.