jQuery Event Methods
What are Events?
All the different visitors' actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
The term "fires/fired" is often used with events.
Example: "The keypress event is fired, the moment you press a key".
Here are some common DOM events:
Mouse Events Keyboard Events Form Events Document /
Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
jQuery Syntax For Event Methods
In 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.
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
$("p").click(function(){
$(this).hide();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Output : When a click on the text, hide the text
dblclick()
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:
Example
$("p").dblclick(function(){
$(this).hide();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
mouseenter()
The mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element:
Example
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:
Example
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mousedown()
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is pressed down, while the
mouse is over the HTML element:
Example
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released, while the mouse is
over the HTML element:
Example
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
hover()
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave()
methods.
The first function is executed when the mouse enters the HTML element, and the second function is
executed when the mouse leaves the HTML element:
Example
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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">This is a paragraph.</p>
</body>
</html>
focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
The on() Method
The on() method attaches one or more event handlers for the selected elements.
Attach a click event to a <p> element:
Example
$("p").on("click", function(){
$(this).hide();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Attach multiple event handlers to a <p> element:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
jQuery change() Method
The change event occurs when the value of an element has been changed (only works on <input>,
<textarea> and <select> elements).
The change() method triggers the change event, or attaches a function to run when a change event
occurs.
Example
Alert a text when an <input> field is changed:
$("input").change(function(){
alert("The text has been changed.");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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>Write something in the input field, and then press enter or click outside the field.</p>
</body>
</html>
jQuery event.currentTarget Property
The event.currentTarget property is the current DOM element within the event bubbling phase, and
is typically equal to this.
Example
event.currentTarget is typically equal to this:
$("h1, h2, p").click(function(event){
alert(event.currentTarget === this);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h1, h2, p").click(function(event){
alert(event.currentTarget === this);
});
});
</script>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p><b>Note:</b> Click on each HTML element. The currentTarget is typically equal to "this", and
will return "true".</p>
</body>
</html>
jQuery event.data Property
The event.data property contains the optional data passed to an event method when the current
executing handler is bound.
Example
Return the data passed with the on() method for each <p> element:
$("p").each(function(i){
$(this).on("click", {x:i}, function(event){
alert("The " + $(this).index() + ". paragraph has data: " + event.data.x);
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").each(function(i){
$(this).on("click", {x:i}, function(event){
alert("The " + $(this).index() + ". paragraph has data: " + event.data.x);
});
});
});
</script>
</head>
<body>
<div style="color:red">Click on each p element to return the data passed with the on()
method.</div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
jQuery event.delegateTarget Property
The event.delegateTarget property returns the element where the currently-called jQuery event
handler was attached.
This property is useful for delegated events attached by the on() method, where the event handler is
attached at an ancestor of the element being processed.
Example
Change the background color of the <div> element (an ancestor of the <button> element):
$("div").on("click", "button", function(event){
$(event.delegateTarget).css("background-color", "pink");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").on("click", "button", function(event){
$(event.delegateTarget).css("background-color", "pink");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>Click the button to change the background color of this div.</p>
<button>Click me!</button>
</div>
<div style="background-color:yellow">
<p>Click the button to change the background color of this div.</p>
<button>Click me!</button>
</div>
</body>
</html>
jQuery event.isDefaultPrevented() Method
The event.isDefaultPrevented() method checks whether the preventDefault() method was called for
the event.
Example
Prevent a link from opening the URL, and check if preventDefault() was called:
$("a").click(function(event){
event.preventDefault();
alert("Was preventDefault() called: " + event.isDefaultPrevented());
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
alert("Was preventDefault() called: " + event.isDefaultPrevented());
});
});
</script>
</head>
<body>
<a href="https://w3schools.com/">Go to W3Schools.com</a>
<p>The preventDefault() method will prevent the link above from following the URL.</p>
<p>Click the link and check if the default action is prevented.</p>
</body>
</html>
jQuery focusin() Method
The focusin event occurs when an element (or any elements inside it) gets focus.
The focusin() method attaches a function to run when a focus event occurs on the element, or any
elements inside it.
Unlike the focus() method, the focusin() method also triggers if any child elements get focus.
Example
Set background color of a <div> element when the <div> element or any child elements get
focus:
$("div").focusin(function(){
$(this).css("background-color", "#FFFFCC");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").focusin(function(){
$(this).css("background-color", "#FFFFCC");
});
$("div").focusout(function(){
$(this).css("background-color", "#FFFFFF");
});
});
</script>
</head>
<body>
<div style="border: 1px solid black;padding:10px;">
First name: <input type="text"><br>
Last name: <input type="text">
</div>
<p>Click an input field to get focus. Click outside an input field to lose focus.</p>
</body>
</html>
jQuery focusout() Method
The focusout event occurs when an element (or any elements inside it) loses focus.
The focusout() method attaches a function to run when a focusout event occurs on the element, or
any elements inside it.
Unlike the blur() method, the focusout() method also triggers if any child elements lose focus.
Example
Set background color of a <div> element when the <div> element or any child elements
loses focus:
$("div").focusout(function(){
$(this).css("background-color", "#FFFFFF");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").focusin(function(){
$(this).css("background-color", "#FFFFCC");
});
$("div").focusout(function(){
$(this).css("background-color", "#FFFFFF");
});
});
</script>
</head>
<body>
<div style="border: 1px solid black;padding:10px;">
First name: <input type="text"><br>
Last name: <input type="text">
</div>
<p>Click an input field to get focus. Click outside an input field to lose focus.</p>
</body>
</html>
jQuery keydown() Method
The keydown event occurs when a keyboard key is pressed down.
The keydown() method triggers the keydown event, or attaches a function to run when a keydown
event occurs.
Example
Set the background color of an <input> field when a keyboard key is pressed down:
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
The order of events related to the keydown event:
keydown - The key is on its way down
keypress - The key is pressed down
keyup - The key is released
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
$("input").keyup(function(){
$("input").css("background-color", "pink");
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Enter your name in the input field above. It will change background color on keydown and
keyup.</p>
</body>
</html>
jQuery keypress() Method
The order of events related to the keypress event:
keydown - The key is on its way down
keypress - The key is pressed down
keyup - The key is released
The keypress() method triggers the keypress event, or attaches a function to run when a keypress
event occurs.
The keypress event is similar to the keydown event. The event occurs when a button is pressed
down.
However, the keypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). Use the
keydown() method to also check these keys.
Example
Count the number of key presses in an <input> field:
$("input").keypress(function(){
$("span").text(i += 1);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i += 1);
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Keypresses: <span>0</span></p>
</body>
</html>
jQuery keyup() Method
The order of events related to the keyup event:
keydown - The key is on its way down
keypress - The key is pressed down
keyup - The key is released
The keyup event occurs when a keyboard key is released.
The keyup() method triggers the keyup event, or attaches a function to run when a keyup event
occurs.
Example
Set the background color of an <input> field when a keyboard key is released:
$("input").keyup(function(){
$("input").css("background-color", "pink");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
$("input").keyup(function(){
$("input").css("background-color", "pink");
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Enter your name in the input field above. It will change background color on keydown and
keyup.</p>
</body>
</html>
jQuery off() Method
The off() method is most often used to remove event handlers attached with the on() method.
As of jQuery version 1.7, the off() method is the new replacement for the unbind(), die() and
undelegate() methods. This method brings a lot of consistency to the API, and we recommend that
you use this method, as it simplifies the jQuery code base.
Note: To remove specific event handlers, the selector string must match the one passed to the on()
method, when the event handler was attached.
Tip: To attach an event that only runs once and then removes itself, use the one() method.
Example
Remove the click event for all <p> elements:
$("button").click(function(){
$("p").off("click");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).css("background-color", "pink");
});
$("button").click(function(){
$("p").off("click");
});
});
</script>
</head>
<body>
<p>Click this paragraph to change its background color.</p>
<p>Click the button below and then click on this paragraph (the click event is removed).</p>
<button>Remove the click event handler</button>
</body>
</html>
jQuery one() Method
The one() method attaches one or more event handlers for the selected elements, and specifies a
function to run when the event occurs.
When using the one() method, the event handler function is only run ONCE for each element.
Example
Increase the text size of a <p> element when it is clicked (the event will only trigger once
for each <p> element):
$("p").one("click", function(){
$(this).animate({fontSize: "+=6px"});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").one("click", function(){
$(this).animate({fontSize: "+=6px"});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>Click any p element to increase its text size. The event will only trigger once for each p
element.</p>
</body>
</html>
jQuery ready() Method
The ready event occurs when the DOM (document object model) has been loaded.
Because this event occurs after the document is ready, it is a good place to have all other jQuery
events and functions. Like in the example above.
The ready() method specifies what happens when a ready event occurs.
Tip: The ready() method should not be used together with <body onload="">.
Example
Use ready() to make a function available after the document is loaded:
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
</body>
</html>
jQuery resize() Method
The resize event occurs when the browser window changes size.
The resize() method triggers the resize event, or attaches a function to run when a resize event
occurs.
Example
Count the number of times the browser window is resized:
$(window).resize(function(){
$('span').text(x += 1);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var x = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x += 1);
});
});
</script>
</head>
<body>
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>
</body>
</html>
jQuery scroll() Method
The scroll event occurs when the user scrolls in the specified element.
The scroll event works for all scrollable elements and the window object (browser window).
The scroll() method triggers the scroll event, or attaches a function to run when a scroll event
occurs.
Example
Count the number of times the scroll is used for an element:
$("div").scroll(function(){
$("span").text(x += 1);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var x = 0;
$(document).ready(function(){
$("div").scroll(function(){
$("span").text( x+= 1);
});
});
</script>
</head>
<body>
<p>Try the scrollbar in the div</p>
<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">In my younger and
more vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this
world haven't had the advantages that you've had.'
</div>
<p>Scrolled <span>0</span> times.</p>
</body>
</html>
jQuery select() Method
The select event occurs when a text is selected (marked) in a text area or a text field.
The select() method triggers the select event, or attaches a function to run when a select event
occurs.
Example
Alert a message when a text is selected in a text field:
$("input").select(function(){
alert("Text marked!");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
alert("Text marked!");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World">
<p>Select some text inside the input field.</p>
</body>
</html>
jQuery submit() Method
The submit event occurs when a form is submitted.
This event can only be used on <form> elements.
The submit() method triggers the submit event, or attaches a function to run when a submit event
occurs.
Example
Display an alert when a form is submitted:
$("form").submit(function(){
alert("Submitted");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
jQuery trigger() Method
The trigger() method triggers the specified event and the default behavior of an event (like form
submission) for the selected elements.
This method is similar to the triggerHandler() method, except that triggerHandler() does not trigger
the default behavior of the event.
Example
Trigger the select event of an <input> element:
$("button").click(function(){
$("input").trigger("select");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World"><br><br>
<button>Trigger the select event for the input field</button>
</body>
</html>
jQuery triggerHandler() Method
The triggerHandler() method triggers the specified event for the selected element.
This method is similar to the trigger() method, except that trigger() also triggers the default behavior
of an event (like form submission).
Example
Trigger the select event of an <input> element:
$("button").click(function(){
$("input").triggerHandler("select");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Select event triggered!");
});
$("button").click(function(){
$("input").triggerHandler("select");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World"><br><br>
<button>Trigger the select event for the input field</button>
<p>Notice that, unlike the trigger() method, the triggerHandler() method does not cause the default
behavior of the event to occur (The text is not marked).</p>
</body>
</html>
jQuery event.isImmediatePropagationStopped() Method
This method checks whether the event.stopImmediatePropagation() was called for the event.
This method returns true if event.stopImmediatePropagation() is called, and false if not.
Example
Check if event.stopImmediatePropagation() was called:
$("div").click(function(event){
event.stopImmediatePropagation();
alert(event.isImmediatePropagationStopped());
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(event){
event.stopImmediatePropagation();
alert("Was event.stopImmediatePropagation() called: " +
event.isImmediatePropagationStopped());
});
});
</script>
</head>
<body>
<div style="height:100px;width:300px;padding:10px;border:1px solid blue;background-
color:lightblue;">Click on this div element.</div>
</body>
</html>
Method / Property Description
blur() Attaches/Triggers the blur event
change() Attaches/Triggers the change event
click() Attaches/Triggers the click event
dblclick() Attaches/Triggers the double click event
event.currentTarget The current DOM element within the event bubbling phase
event.data Contains the optional data passed to an event method when the current
executing handler is bound
event.delegateTarget Returns the element where the currently-called jQuery event handler was
attached
event.isDefaultPrevented() Returns whether event.preventDefault() was called for the event
object
event.isImmediatePropagationStopped() Returns whether event.stopImmediatePropagation()
was called for the event object
event.isPropagationStopped() Returns whether event.stopPropagation() was called for the
event object
event.namespace Returns the namespace specified when the event was triggered
event.pageX Returns the mouse position relative to the left edge of the document
event.pageY Returns the mouse position relative to the top edge of the document
event.preventDefault() Prevents the default action of the event
event.relatedTarget Returns which element being entered or exited on mouse movement
event.result Contains the last/previous value returned by an event handler
triggered by the specified event
event.stopImmediatePropagation() Prevents other event handlers from being called
event.stopPropagation() Prevents the event from bubbling up the DOM tree, preventing any
parent handlers from being notified of the event
event.target Returns which DOM element triggered the event
event.timeStamp Returns the number of milliseconds since January 1, 1970, when the
event is triggered
event.type Returns which event type was triggered
event.which Returns which keyboard key or mouse button was pressed for the event
focus() Attaches/Triggers the focus event
focusin() Attaches an event handler to the focusin event
focusout() Attaches an event handler to the focusout event
hover() Attaches two event handlers to the hover event
keydown() Attaches/Triggers the keydown event
keypress() Attaches/Triggers the keypress event
keyup() Attaches/Triggers the keyup event
mousedown() Attaches/Triggers the mousedown event
mouseenter() Attaches/Triggers the mouseenter event
mouseleave() Attaches/Triggers the mouseleave event
mousemove() Attaches/Triggers the mousemove event
mouseout() Attaches/Triggers the mouseout event
mouseover() Attaches/Triggers the mouseover event
mouseup() Attaches/Triggers the mouseup event
off() Removes event handlers attached with the on() method
on() Attaches event handlers to elements
one() Adds one or more event handlers to selected elements. This handler can only
be triggered once per element
$.proxy() Takes an existing function and returns a new one with a particular context
ready() Specifies a function to execute when the DOM is fully loaded
resize() Attaches/Triggers the resize event
scroll() Attaches/Triggers the scroll event
select() Attaches/Triggers the select event
submit() Attaches/Triggers the submit event
toggle() Removed in version 1.9. Attaches two or more functions to toggle between
for the click event
trigger() Triggers all events bound to the selected elements
triggerHandler() Triggers all functions bound to a specified event for the selected elements
