revision:
Syntax: $(selector).blur() or $(selector).blur(function)
The blur event occurs when an element loses focus.
The blur() method triggers the blur event, or attaches a function to run when a blur event occurs. This method is often used together with the focus() method.
Parameters:
function : optional. Specifies the function to run when the blur event occurs.
Write something in the input field, and then click outside the field to lose focus (blur).
<div id="div1">
Enter your name: <input type="text">
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>
</div>
<script>
$(document).ready(function(){
$("#div1 input").blur(function(){
alert("This input field has lost its focus.");
});
});
</script>
Syntax: $(selector).change() or $(selector).change(function)
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.
Note: for select menus, the change event occurs when an option is selected. For text fields or text areas, the change event occurs when the field loses focus, after the content has been changed.
Parameters:
function : optional. Specifies the function to run when the change event occurs for the selected elements.
Write something in the input field, and then press enter or click outside the field.
<div id="div2">
<input type="text">
<p>Write something in the input field, and then press enter or click outside the field.</p>
</div>
<script>
$(document).ready(function(){
$("#div2 input").change(function(){
alert("The text has been changed.");
});
});
</script>
Syntax: $(selector).click() or $(selector).click(function)
The click event occurs when an element is clicked. The click() method triggers the click event, or attaches a function to run when a click event occurs.
Parameters:
function : optional. Specifies the function to run when the click event occurs.
Click on this paragraph.
<div id="div3">
<p>Click on this paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div3 p").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
Syntax: $(selector).dblclick() or $(selector).dblclick(function)
The dblclick event occurs when an element is double-clicked. The dblclick() method triggers the dblclick event, or attaches a function to run when a dblclick event occurs.
Tip: The dblclick event also generates a click event. This can cause problems if both events are applied to the same element.
Parameters:
function : optional. Specifies the function to run when the dblclick event occurs.
Double-click on this paragraph.
<div id="div4">
<p>Double-click on this paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div4 p").dblclick(function(){
alert("The paragraph was double-clicked.");
});
});
</script>
Syntax: event.currentTarget
The event.currentTarget property is the current DOM element within the event bubbling phase, and is typically equal to "this".
Parameters:
event : required. The event parameter comes from the event binding function
Note: Click on each HTML element. The currentTarget is typically equal to "this", and will return "true".
<div id="div5">
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<p><b>Note:</b> Click on each HTML element. The currentTarget is typically equal to "this", and will return "true".</p>
</div>
<script>
$(document).ready(function(){
$("#div5 h4, #div5 h5, #div5 p").click(function(event){
alert(event.currentTarget === this);
});
});
</script>
Syntax: event.data
The event.data property contains the optional data passed to an event method when the current executing handler is bound.
Parameters:
event : required. The event parameter comes from the event binding function
This is a paragraph.
This is another paragraph.
This is another paragraph.
<div id="div6">
<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>
</div>
<script>
$(document).ready(function(){
$("#div6 p").each(function(i){
$(this).on("click", {x:i}, function(event){
alert("The " + $(this).index() + ". paragraph has data: " + event.data.x);
});
});
});
</script>
Syntax: event.delegateTarget
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.
Tip: event.delegateTarget is equal to event.currentTarget, if the event is directly-bound to an element and no delegation occurs.
Parameters:
event : required. The event parameter comes from the event binding function
Click the button to change the background color of this div.
Click the button to change the background color of this div.
<div id="div7">
<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>
</div>
<script>
$(document).ready(function(){
$("#div7 div").on("click", "button", function(event){
$(event.delegateTarget).css("background-color", "pink");
});
});
</script>
Syntax: event.isDefaultPrevented()
The event.isDefaultPrevented() method checks whether the preventDefault() method was called for the event.
Parameters:
event : required. The event parameter comes from the event binding function
The preventDefault() method will prevent the link above from following the URL.
Click the link and check if the default action is prevented.
<div id="div8">
<a href="https://lwitters.com/">Go to my website</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>
</div>
<script>
$(document).ready(function(){
$("#div8 a").click(function(event){
event.preventDefault();
alert("Was preventDefault() called: " + event.isDefaultPrevented());
});
});
</script>
Syntax: event.isImmediatePropagationStopped()
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.
Parameters:
event : required. The event parameter comes from the event binding function
<div id="div9">
<div style="height:10vw;width:30vw;padding:1vw;border:0.1vw solid blue;background-color:lightblue;">
Click on this div element.</div>
</div>
<script>
$(document).ready(function(){
$("#div9 div").click(function(event){
event.stopImmediatePropagation();
alert("Was event.stopImmediatePropagation() called: " + event.isImmediatePropagationStopped());
});
});
</script>
Syntax: event.isPropagationStopped()
The event.isPropagationStopped() method checks whether event.stopPropagation() was called for the event. This method returns true if event.stopPropagation() is called, and false if not.
Parameters:
event : required. The event parameter comes from the event binding function
<div id="div10">
<div style="height:10vw;width:30vw;padding:1vw;border:0.1vw solid blue;background-color:lightblue;">
Click on this div element.</div>
</div>
<script>
$(document).ready(function(){
$("#div10 div").click(function(event){
event.stopPropagation();
alert("Was event.stopPropagation() called: " + event.isPropagationStopped());
});
});
</script>
Syntax: event.namespace
The event.namespace property returns the custom namespace when the event was triggered. This property can be used by plugin authors to handle tasks differently depending on the namespace used.
Tip: Namespaces beginning with an underscore are reserved for jQuery.
Parameters:
event : required. The event parameter comes from the event binding function
Click on this paragraph.
<div id="div11">
<p>Click on this paragraph.</p>
<button id="btn1">Remove namespace</button>
</div>
<script>
$(document).ready(function(){
$("#div11 p").on("custom.someNamespace",function(event){
alert(event.namespace);
});
$("#div11 p").click(function(event){
$(this).trigger("custom.someNamespace");
});
$("#btn1").click(function(){
$("#div11 p").off("custom.someNamespace");
});
});
</script>
Syntax: event.pageX
The event.pageX property returns the position of the mouse pointer, relative to the left edge of the document.
Tip: this event property is often used together with the event.pageY property.
Parameters:
event : required. The event parameter comes from the event binding function
The mouse pointer position is at:
<div id="div12">
<p>The mouse pointer position is at: <span></span></p>
</div>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("#div12 span").text("X: " + event.pageX + ", Y: " + event.pageY);
});
});
</script>
Syntax: event.pageY
The event.pageY property returns the position of the mouse pointer, relative to the top edge of the document.
Tip: this event property is often used together with the event.pageX property.
Parameters:
event : required. The event parameter comes from the event binding function
The mouse pointer position is at:
<div id="div12">
<p>The mouse pointer position is at: <span></span></p>
</div>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("#div12 span").text("X: " + event.pageX + ", Y: " + event.pageY);
});
});
</script>
Syntax: event.preventDefault()
The event.preventDefault() method stops the default action of an element from happening.
For example: prevent a submit button from submitting a form, prevent a link from following the URL.
Tip: use the event.isDefaultPrevented() method to check whether the preventDefault() method was called for the event.
Parameters:
event : required. The event parameter comes from the event binding function
The preventDefault() method will prevent the link above from following the URL.
<div id="div14">
<a href="https://lwitters.com/">Go to my website</a>
<p>The preventDefault() method will prevent the link above from following the URL.</p>
</div>
<script>
$(document).ready(function(){
$("#div14 a").click(function(event){
event.preventDefault();
});
});
</script>
Syntax: event.relatedTarget
The event.relatedTarget property returns which element being entered or exited on mouse movement.
Parameters:
event : required. The event parameter comes from the event binding function
This is a paragraph
<div id="div15">
<div style="height:10vw;border:solid">This is a div element
<p style="background-color:pink">This is a paragraph</p>
</div><br>
<div id="msg"></div>
</div>
<script>
$(document).ready(function(){
$("#div15 div, #div15 p").mouseenter(function(event){
$("#msg").html("Related target is: " + event.relatedTarget.nodeName);
});
});
</script>
Syntax:
The event.result property contains the last/previous value returned by an event handler triggered by the specified event.
Parameters:
event : required. The event parameter comes from the event binding function
example: return the value of the previous click event:
This is a paragraph.
<div id="div16">
<button>Click me to display event.result</button>
<p>This is a paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div16 button").click(function(){
return "Hello world!";
});
$("#div16 button").click(function(event){
$("#div16 p").html(event.result);
});
});
</script>
Syntax: event.stopImmediatePropagation()
The event.stopImmediatePropagation() method stops the rest of the event handlers from being executed. This method also stops the event from bubbling up the DOM tree.
Tip: use the event.isImmediatePropagationStopped() method to check whether this method was called for the event.
Parameters:
event : required. The event parameter comes from the event binding function
The second and third click event will not be executed due to event.stopImmediatePropagation(). Try to erase this method and see what happens.
<div id="div17">
<div style="height:10vw;width:20vw;padding:1vw;border:0.1vw solid blue;background-color:lightblue;">
Click on this div element.</div>
<p>The second and third click event will not be executed due to event.stopImmediatePropagation().
Try to erase this method and see what happens.</p>
</div>
<script>
$(document).ready(function(){
$("#div17 div").click(function(event){
alert("Event handler 1 executed");
event.stopImmediatePropagation();
});
$("#div17 div").click(function(event){
alert("Event handler 2 executed");
});
$("#div17 div").click(function(event){
alert("Event handler 3 executed");
});
});
</script>
Syntax: event.stopPropagation()
The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
Tip: use the event.isPropagationStopped() method to check whether this method was called for the event.
Parameters:
event : required. The event parameter comes from the event binding function
This is a p element, in the div element.
This is a span element in the p and the div element.
Note: Click on each of the elements above. When clicking on the div element, it will alert that the div element was clicked. When clicking on the p element, it will return both the p and the div element, since the p element is inside the div element. But when clicking on the span element, it will only return itself, and not the p and the div element (even though its inside these elements). The event.stopPropagation() stops the click event from bubbling to the parent elements.
Tip: Try to remove the event.stopPropagation() line, and click on the span element again (the click event will now bubble up to parent elements).
<div id="div18">
<div style="height:10vw;width:30vw;padding:1vw;border:0.1vw solid blue;background-color:lightblue;">
This is a div element.
<p style="background-color:pink">This is a p element, in the div element. <br><span
style="background-color:orange">This is a span element in the p and the div element.</span></p></div>
<p><b>Note:</b> Click on each of the elements above. When clicking on the <b>div</b>
element, it will alert that the div element was clicked. When clicking on the <b>p</b> element, it
will return both the p and the div element, since the p element is inside the div element.
But when clicking on the <b>span</b> element, it will only return itself, and not the p and the div
element (even though its inside these elements). The event.stopPropagation() stops the click event from
bubbling to the parent elements.
</p>
<p><b>Tip:</b> Try to remove the event.stopPropagation() line, and click on the span element again
(the click event will now bubble up to parent elements).</p>
</div>
<script>
$(document).ready(function(){
$("#div18 span").click(function(event){
event.stopPropagation();
alert("The span element was clicked.");
});
$("#div18 p").click(function(event){
alert("The p element was clicked.");
});
$("#div18 div").click(function(){
alert("The div element was clicked.");
});
});
</script>
Syntax: event.target
The event.target property returns which DOM element triggered the event. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling.
Parameters:
event : required. The event parameter comes from the event binding function
This is a paragraph
The heading, paragraph and button element have a click event defined. Click on each element to display which element triggered the event.
<div id="div19">
<h4>This is a heading</h4>
<p>This is a paragraph</p>
<button>This is a button</button>
<p>The heading, paragraph and button element have a click event defined. Click on each element
to display which element triggered the event.</p>
<div style="color:blue;"></div>
</div>
<script>
$(document).ready(function(){
$("#div19 p, #div19 button, #div19 h4").click(function(event){
$("#div19 div").html("Triggered by a " + event.target.nodeName + " element.");
});
});
</script>
Syntax: event.timeStamp
The event.timeStamp property returns the number of milliseconds since January 1, 1970, when the event is triggered.
Parameters:
event : required. The event parameter comes from the event binding function
The click event occurred unknown milliseconds after January 1, 1970.
<div id="div20">
<p>The click event occurred <span style="color:red">unknown</span> milliseconds after January 1, 1970.</p>
<button>Click me</button>
</div>
<script>
$(document).ready(function(){
$("#div20 button").click(function(event){
$("#div20 span").text(event.timeStamp);
});
});
</script>
Syntax: event.type
The event.type property returns which event type was triggered.
Parameters:
event : required. The event parameter comes from the event binding function
This paragraph has a click, double-click, mouseover and mouseout event defined.
If you trigger one of the events, the div element below will display the event type.
<div id="div21">
<p>This paragraph has a click, double-click, mouseover and mouseout event defined.<br>
If you trigger one of the events, the div element below will display the event type.</p>
<div></div>
</div>
<script>
$(document).ready(function(){
$("#div21 p").on("click dblclick mouseover mouseout",function(event){
$("#div21 div").html("Event: " + event.type);
});
});
</script>
Syntax: event.which
The event.which property returns which keyboard key or mouse button was pressed for the event.
Parameters:
event : required. The event parameter comes from the event binding function
When you type in the field above, the div element below will display the key number.
<div id="div22">
Enter your name: <input type="text">
<p>When you type in the field above, the div element below will display the key number.</p>
<div></div>
</div>
<script>
$(document).ready(function(){
$("#div22 input").keydown(function(event){
$("#div22 div").html("Key: " + event.which);
});
});
</script>
Syntax: $(selector).focus() or $(selector).focus(function)
The focus event occurs when an element gets focus (when selected by a mouse click or by tab-navigating" to it). The focus() method triggers the focus event, or attaches a function to run when a focus event occurs.
Tip: This method is often used together with the blur() method.
Parameters:
function : optional. Specifies the function to run when the focus event occurs
Click in the input field to get focus.
<div id="div23">
<input>
<span>Nice to meet you!</span>
<p>Click in the input field to get focus.</p>
</div>
<style>
#div23 span{display: none}
</style>
<script>
$(document).ready(function(){
$("#div23 input").focus(function(){
$("#div23 span").css("display", "inline").fadeOut(2000);
});
});
</script>
Syntax: $(selector).focusin(function)
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.
Tip: an element gets focus when selected by a mouse click or by "tab-navigating" to it.
Tip: this method is often used together with the focusout() method.
Parameters:
function : required. Specifies the function to run when the focusin event occurs
Click an input field to get focus. Click outside an input field to lose focus.
<div id="div24">
<div style="border: 0.1vw solid black;padding:1vw;">
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>
</div>
<script>
$(document).ready(function(){
$("#div24 div").focusin(function(){
$(this).css("background-color", "#FFFFCC");
});
$("#div24 div").focusout(function(){
$(this).css("background-color", "#FFFFFF");
});
});
</script>
Syntax: $(selector).focusout(function)
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.
Tip: this method is often used together with the focusin() method.
Parameters:
function : required. Specifies the function to run when the focusout event occurs
Click an input field to get focus. Click outside an input field to lose focus.
<div id="div25">
<div style="border: 0.1vw solid black;padding:1vw;">
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>
</div>
<script>
$(document).ready(function(){
$("#div25 div").focusin(function(){
$(this).css("background-color", "#FFFFCC");
});
$("#div25 div").focusout(function(){
$(this).css("background-color", "#FFFFFF");
});
});
</script>
Syntax: $(selector).hover(inFunction,outFunction)
The >hover() method specifies two functions to run when the mouse pointer hovers over the selected elements. This method triggers both the mouseenter and mouseleave events.
Note: If only one function is specified, it will be run for both the mouseenter and mouseleave events.
Parameters:
inFunction : required. Specifies the function to run when the mouseenter event occurs
outFunction : optional. Specifies the function to run when the mouseleave event occurs
Hover the mouse pointer over this paragraph.
<div id="div26">
<p>Hover the mouse pointer over this paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div26 p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
});
</script>
Syntax: $(selector).keydown() or $(selector).keydown(function)
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.
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.
Tip: use the event.which property to return which keyboard key was pressed.
Parameters:
function : optional. Specifies the function to run when the keydown event is triggered.
Enter your name in the input field above. It will change background color on keydown and keyup.
<div id="div27">
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>
</div>
<script>
$(document).ready(function(){
$("#div27 input").keydown(function(){
$("#div27 input").css("background-color", "yellow");
});
$("#div27 input").keyup(function(){
$("#div27 input").css("background-color", "pink");
});
});
</script>
Syntax: $(selector).keypress() or $(selector).keypress(function)
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.
The keypress event is similar to the keydown event. The event occurs when a button is pressed down. The keypress() method triggers the keypress event, or attaches a function to run when a keypress event occurs.
Tip: the keypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). Use the keydown() method to also check these keys.
Parameters:
function : optional. Specifies the function to run when the keypress event is triggered.
keypresses : 0
<div id="div28">
Enter your name: <input type="text">
<p>keypresses : <span>0</span></p>
</div>
<script>
i = 0;
$(document).ready(function(){
$("#div28 input").keypress(function(){
$("#div28 span").text(i += 1);
});
});
</script>
Syntax: $(selector).keyup() or $(selector).keyup(function)
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.
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.
Tip: use the event.which property to return which key was pressed.
Parameters:
function : optional. Specifies the function to run when the keyup event is triggered.
Enter your name in the input field above. It will change background color on keydown and keyup.
<div id="div29">
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>
</div>
<script>
$(document).ready(function(){
$("#div29 input").keydown(function(){
$("#div29 input").css("background-color", "yellow");
});
$("#div29 input").keyup(function(){
$("#div29 input").css("background-color", "pink");
});
});
</script>
Syntax: $(selector).mousedown() or $(selector).mousedown(function)
The mousedown event occurs when the left mouse button is pressed down over the selected element. The mousedown() method triggers the mousedown event, or attaches a function to run when a mousedown event occurs.
Tip: This method is often used together with the mouseup() method.
Parameters:
function : optional. Specifies the function to run when the mousedown event is triggered.
<div id="div30">
<div>Press down and release the mouse button over this div element.</div>
</div>
<script>
$(document).ready(function(){
$("#div30 div").mouseup(function(){
$(this).after("<p style='color:green;'>Mouse button released.</p>");
});
$("#div30 div").mousedown(function(){
$(this).after("<p style='color:purple;'>Mouse button pressed down.</p>");
});
});
</script>
Syntax: $(selector).mouseenter() or $(selector).mouseenter(function)
The mouseenter event occurs when the mouse pointer is over (enters) the selected element. The mouseenter() method triggers the mouseenter event, or attaches a function to run when a mouseenter event occurs.
Note: Unlike the mouseover event, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well as the selected element.
Tip: This event is often used together with the mouseleave event.
Parameters:
function : optional. Specifies the function to run when the mouseenter event is triggered.
Move the mouse pointer over this paragraph.
<div id="div31">
<p>Move the mouse pointer over this paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div31 p").mouseenter(function(){
$("#div31 p").css("background-color", "yellow");
});
$("#div31 p").mouseleave(function(){
$("#div31 p").css("background-color", "lightgray");
});
});
</script>
Syntax: $(selector).mouseleave() or $(selector).mouseleave(function)
The mouseleave event occurs when the mouse pointer leaves the selected element. The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs.
Note: Unlike the mouseout event, the mouseleave event only triggers when the mouse pointer leaves the selected element. The mouseout event is triggered if a mouse pointer leaves any child elements as well as the selected element.
Tip: This event is often used together with the mouseleenter event.
Parameters:
function : optional. Specifies the function to run when the mouseleave event is triggered.
Move the mouse pointer over this paragraph.
<div id="div32">
<p>Move the mouse pointer over this paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div32 p").mouseenter(function(){
$("#div32 p").css("background-color", "yellow");
});
$("#div32 p").mouseleave(function(){
$("#div32 p").css("background-color", "lightgray");
});
});
</script>
Syntax: $(selector).mousemove() or $(selector).mousemove(function)
The mousemove event occurs whenever the mouse pointer moves within the selected element. The mousemove() method triggers the mousemove event, or attaches a function to run when a mousemove event occurs.
Note: Each time a user moves the mouse one pixel, a mousemove event occurs. It takes system resources to process all mousemove events. Use this event carefully.
Parameters:
function : optional. Specifies the function to run when the mousemove event is triggered.
Mouse is at coordinates: .
<div id="div33">
<p>Mouse is at coordinates: <span></span>.</p>
</div>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("#div33 span").text(event.pageX + ", " + event.pageY);
});
});
</script>
Syntax: $(selector).mouseout() or $(selector).mouseout(function)
The mouseout event occurs when the mouse pointer leaves the selected element. The mouseout() method triggers the mouseout event, or attaches a function to run when a mouseout event occurs.
Note: unlike the mouseleave event, the mouseout event is triggered if a mouse pointer leaves any child elements as well as the selected element. The mouseleave event only triggers when the mouse pointer leaves the selected element.
Tip: This event is often used together with the mouseover event.
Parameters:
function : optional. Specifies the function to run when the mouseout event is triggered.
Move the mouse pointer over this paragraph.
<div id="div34">
<p>Move the mouse pointer over this paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div34 p").mouseover(function(){
$("#div34 p").css("background-color", "yellow");
});
$("#div34 p").mouseout(function(){
$("#div34 p").css("background-color", "lightgray");
});
});
</script>
Syntax: $(selector).mouseover() or $(selector).mouseover(function)
The mouseover event occurs when the mouse pointer is over the selected element. The mouseover() method triggers the mouseover event, or attaches a function to run when a mouseover event occurs.
Note: unlike the mouseenter event, the mouseover event triggers if a mouse pointer enters any child elements as well as the selected element. The mouseenter event is only triggered when the mouse pointer enters the selected element. See the example at the end of the page for a demonstration.
Tip: This event is often used together with the mouseout event.
Parameters:
function : optional. Specifies the function to run when the mouseover event is triggered.
Move the mouse pointer over this paragraph.
<div id="div35">
<p>Move the mouse pointer over this paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div35 p").mouseover(function(){
$("#div35 p").css("background-color", "pink");
});
$("p").mouseout(function(){
$("#div35 p").css("background-color", "lightgray");
});
});
</script>
Syntax: $(selector).mouseup() or $(selector).mouseup(function)
The mouseup event occurs when the left mouse button is released over the selected element. The mouseup() method triggers the mouseup event, or attaches a function to run when a mouseup event occurs.
Tip: This method is often used together with the mousedown() method.
Parameters:
function : optional. Specifies the function to run when the mouseup event is triggered.
<div id="div36">
<div>Press down and release the mouse button over this div element.</div>
</div>
<script>
$(document).ready(function(){
$("#div36 div").mouseup(function(){
$(this).after("<p style='color:green;'>Mouse button released.</p>");
});
$("#div36 div").mousedown(function(){
$(this).after("<p style='color:purple;'>Mouse button pressed down.</p>");
});
});
</script>
Syntax: $(selector).off(event,selector,function(eventObj),map)
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.
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.
Parameters:
event : required. Specifies one or more events or namespaces to remove from the selected element(s). Multiple event values are separated by a space. Must be a valid event.
selector : optional. A selector which should match the one originally passed to the on() method when attaching event handlers
function(eventObj) : optional. Specifies the function to run when the event occurs
map : specifies an event map ({event:function, event:function, ...}) containing one or more event to attach to the elements, and functions to run when the events occur.
Click this paragraph to change its background color.
Click the button below and then click on this paragraph (the click event is removed).
<div id="div37">
<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>
</div>
<script>
$(document).ready(function(){
$("#div37 p").on("click", function(){
$(this).css("background-color", "pink");
});
$("#div37 button").click(function(){
$("#div37 p").off("click");
});
});
</script>
Syntax: $(selector).on(event,childSelector,data,function,map)
The on() method attaches one or more event handlers for the selected elements and child elements.
As of jQuery version 1.7, the on() method is the new replacement for the bind(), live() and delegate() methods. This method brings a lot of consistency to the API.
Note: Event handlers attached using the on() method will work for both current and FUTURE elements (like a new element created by a script).
Tip: To remove event handlers, use the off() method.
Tip: To attach an event that only runs once and then removes itself, use the one() method.
Parameters:
event : required. Specifies one or more event(s) or namespaces to attach to the selected elements. Multiple event values are separated by space. Must be a valid event.
childSelector : optional. Specifies that the event handler should only be attached to the specified child elements (and not the selector itself, like the deprecated delegate() method).
data : optional. Specifies additional data to pass along to the function.
function: required. Specifies the function to run when the event occurs.
map : specifies an event map ({event:function, event:function, ...}) containing one or more event to attach to the selected elements, and functions to run when the events occur.
Click this paragraph.
<div id="div38">
<p>Click this paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div38 p").on("click", function(){
alert("The paragraph was clicked.");
});
});
</script>
Syntax: $(selector).one(event,data,function)
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.
Parameters:
event : required. Specifies one or more events to attach to the elements. Multiple event values are separated by space. Must be a valid event.
data : optional. Specifies additional data to pass along to the function
function : required. Specifies the function to run when the event occurs.
This is a paragraph.
This is another paragraph.
Click any p element to increase its text size. The event will only trigger once for each p element.
<div id="div39">
<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>
</div>
<script>
$(document).ready(function(){
$("#div39 p").one("click", function(){
$(this).animate({fontSize: "+=6px"});
});
});
</script>
Syntax: $(selector).proxy(function,context) or $(selector).proxy(context,name)
The $.proxy method takes an existing function and returns a new one with a particular context. This method is often used for attaching events to an element where the context is pointing back to a different object.
Tip: If you bind the function returned from $.proxy, jQuery will still unbind the correct function if passed the original.
Parameters:
function : the existing function to be called
context : the name of the object where the function lies
name : the existing function whose context will be changed (should be a property of the context object).
<div id="div40">
<button>Run test function</button>
<p></p>
</div>
<script>
$(document).ready(function(){
var objPerson = {
name: "John Doe",
age: 32,
test: function(){
$("#div40 p").after("Name: " + this.name + "<br> Age: " + this.age);
}
};
$("#div40 button").click($.proxy(objPerson, "test"));
});
</script>
Syntax: $(document).ready(function)or $(function)
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.
The ready() method specifies what happens when a ready event occurs.
Tip: The ready() method should not be used together with <body onload="">.
Parameters:
function : required. Specifies the function to run after the document is loaded.
This is a paragraph.
<div id="div41">
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
</div>
<script>
$(document).ready(function(){
$("#div41 button").click(function(){
$("#div41 p").slideToggle();
});
});
</script>
Syntax: $(selector).resize() or $(selector).resize(function)
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.
Parameters:
function : optional. Specifies the function to run when the resize event is triggered.
Window resized 0 times.
Try resizing your browser window.
<div id="div42">
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>
</div>
<script>
var x = 0;
$(document).ready(function(){
$(window).resize(function(){
$("#div42 span").text(x += 1);
});
});
</script>
Syntax: $(selector).scroll() or $(selector).scroll(function)
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.
Parameters:
function : optional. Specifies the function to run when the scroll event is triggered.
Scrolled 0 times.
<div id="div43">
<div style="border:0.1vw solid black;width:15vw;height:10vw;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
</div>
<p>Scrolled <span>0</span> times.</p>
</div>
<script>
var x = 0;
$(document).ready(function(){
$("#div43 div").scroll(function(){
$("#div43 span").text( x+= 1);
});
});
</script>
Syntax: $(selector).select() or $(selector).select(function)
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.
Parameters:
function : optional. Specifies the function to run when the select event is triggered.
Select some text inside the input field.
<div id="div44">
<input type="text" value="Hello World">
<p>Select some text inside the input field.</p>
</div>
<script>
$(document).ready(function(){
$("#div44 input").select(function(){
alert("Text marked!");
});
});
</script>
Syntax: $(selector).submit() or $(selector).submit(function)
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.
Parameters:
function : optional. Specifies the function to run when the submit event is triggered.
<div id="div45">
<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>
</div>
<script>
$(document).ready(function(){
$("#div45 form").submit(function(){
alert("Submitted");
});
});
</script>
Syntax: $(selector).trigger(event,eventObj,param1,param2,...)
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.
Parameters:
event : required. Specifies the event to trigger for the specified element. Can be a custom event, or any of the standard events
eventObj :
param1, param2, .. : optional. Additional parameters to pass on to the event handler. Additional parameters are especially useful with custom events
<div id="div45">
<input type="text" value="Hello World"><br><br>
<button>Trigger the select event for the input field</button>
</div>
<script>
$(document).ready(function(){
$("#div45 input").select(function(){
$("#div45 input").after(" Text marked!");
});
$("#div45 button").click(function(){
$("#div45 input").trigger("select");
});
});
</script>
Syntax: $(selector).triggerHandler(event,param1,param2,...)
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).
Parameters:
event : required. Specifies the event to trigger for the specified element
param1, param2, .. : Optional. Additional parameters to pass on to the event handler. Additional parameters are especially useful with custom events
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).
<div id="div46">
<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>
</div>
<script>
$(document).ready(function(){
$("#div46 input").select(function(){
$("#div46 input").after(" Select event triggered!");
});
$("#div46 button").click(function(){
$("#div46 input").triggerHandler("select");
});
});
</script>