Can jquery bind events to call functions?

jquery can bind events to call functions. jquery provides a variety of binding methods: 1. bind(), which can add one or more event handlers to the selected element and specify the function to run when the event occurs; 2. blur(), which can add one or more event handlers to the selected element. Loss of focus event, and stipulates the function to be run when the event occurs; 3. change(), can add a change event to the selected element, and stipulates the function to run when the event occurs; 4. click(), can add a single click event to the selected element click event and specify the event handler function.

The operating environment of this tutorial: windows7 system, jquery3.6.0 version, Dell G3 computer.

jQuery event handling methods are the core of jQuery.

The event method will trigger an event on the matching element, or bind the function to an event on all matching elements.

jquery provides a variety of binding methods

Method	Description
bind()	Append one or more events to the matching element Processor
blur()	Triggers, or binds a function to the blur event of the specified element
change( )	Trigger, or bind the function to the change event of the specified element
click()	Trigger, or bind the function to the specified The click event of the element
dblclick()	triggers, or binds the function to the double click event of the specified element
delegate()	Attach one or more event handlers to the current or future child elements of the matched element
die()	Move Except for all event handlers added through the live() function.
error()	Trigger or bind the function to the error event of the specified element
event.isDefaultPrevented( )	Returns whether event.preventDefault() is called on the event object.
event.pageX	Mouse position relative to the left edge of the document.
event.pageY	Mouse position relative to the top edge of the document.
event.preventDefault()	The default action to prevent the event.
event.result	Contains the last value returned by the event handler triggered by the specified event.
event.target	The DOM element that triggered the event.
event.timeStamp	This property returns the number of milliseconds from January 1, 1970 to the time of the event.
event.type	Describes the type of event.
event.which	Indicates which key or button was pressed.
focus()	Trigger, or bind a function to the focus event of a specified element
keydown()	Trigger, or bind the function to the key down event of the specified element
keypress()	Trigger, or bind the function to the specified element The key press event
keyup()	triggers, or binds the function to the key up event of the specified element
live()	Add one or more event handlers for current or future matching elements
load()	Trigger, or Bind the function to the load event of the specified element
mousedown()	Trigger, or bind the function to the mouse down event of the specified element
mouseenter()	Trigger, or bind a function to the mouse enter event of a specified element
mouseleave()	Trigger, or bind the function to the mouse leave event of the specified element
mousemove()	Trigger, or bind the function to the mouse move event of the specified element
mouseout()	Trigger, or bind a function to the mouse out event of the specified element
mouseover()	Trigger, or bind the function to the mouse over event of the specified element
mouseup()	Trigger, or bind the function to the specified element The mouse up event
one()	Adds an event handler to the matching element. This handler can only be triggered once per element.
ready()	Document ready event (when the HTML document is ready and available)
resize()	Trigger, or bind the function to the resize event of the specified element
scroll()	Trigger, or bind the function to the scroll event of the specified element
select()	Trigger or bind a function to the select event of the specified element
submit()	Trigger, or bind a function to the submit event of a specified element
toggle()	Bind two or more event handler functions , executed when a rotating click event occurs.
trigger()	Specified events for all matching elements
triggerHandler()	First A specified event for a matched element
unbind()	Removes an added event handler from the matched element
undelegate()	Removes an added event handler from the matching element, now or in the future
unload()	triggers, Or bind the function to the unload event of the specified element

#Let’s take a look at some common event binding methods.

1. Click() method:

The click() method specifies the function to be run when a click event occurs

Example: Single Alert text when the

element is clicked

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").click(function() {
					alert("段落被点击了。");
				});
			});
		</script>
	</head>
	<body>

		<p>点击这个段落。</p>

	</body>
</html>

2. change() method

change() method specifies when Function to run on change event.

Example: Alert text when the field changes

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function(){
		  $("input").change(function(){
		    console.log("文本已被修改");
		  });
		});
		</script>
	</head>
	<body>

		<input type="text">
		<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>

	</body>
</html>

3, dblclick()

## The #dblclick() method specifies a function to run when a double-click event occurs.

Example: Alert text when double-clicking the

element

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function(){
			  $("p").dblclick(function() {
				console.log("这个段落被双击");
			  });
			});
		</script>
	</head>
	<body>

		<p>双击这个段落。</p>

	</body>
</html>

4, hover() method## The #hover() method specifies two functions to run when the mouse pointer hovers over the selected element.

Method triggers mouseenter and mouseleave events.

Example: Change the background color of the

element when the mouse pointer is hovering over it

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").hover(function() {
					$("p").css("background-color", "yellow");
				}, function() {
					$("p").css("background-color", "pink");
				});
			});
		</script>
	</head>
	<body>

		<p>鼠标移动到该段落。</p>

	</body>
</html>

[Recommended learning:

jQuery Video tutorial

、web front-end video】

The above is the detailed content of Can jquery bind events to call functions?. For more information, please follow other related articles on the PHP Chinese website!