AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery Events


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

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:

Syntax to assign a click event to all paragraphs on a page, you can do this:

Syntax:

$("p").click();

Then to define what should happen when the event fires pass a function to the event:

$("p").click(function(){
// 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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...