How to use the bind() method in jQuery

This article will share about the bind() method of event binding in jQuery. It has certain reference value. I hope it will be helpful to everyone's learning!

The two most important ways for jQuery to handle events are the event binding bind() method and the event removal unbind() method, which is to add code to one or more events on a group of elements. Today The use of bind() method will be introduced in detail

bind() method

bind() method is to add one or more event handlers to the selected element. And specify the function to run when the event occurs.

$(selector).bind(event,data,function)

event: Specifies one or more events to be added to the element. Multiple events can be separated by spaces and must be Valid events.

data: refers to the additional data passed to the function.

function: refers to the function that runs when an event occurs

Example

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){//入口函数
$("a").bind("click", function() {

alert($(this).text());

});
});

Result

When a link is clicked When a link is bound to the click event, a box will pop up to display the content when clicked. jQuery will automatically assign the clicked element to the "this" keyword in the anonymous function, allowing access to the element that activates the element. At the same time, you can Trigger multiple events

<div id="div" style="background-color:pink;width:100px;height:100px;"></div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$("#div").bind("mousemove", function(event){
$(this).text(event.pageX + "," + event.pageY);});

Result

We create a div element with a length and width of 100px and pink. For this div, we bind the mousemove event using an anonymous function with a parameter called "event". When the mouse rolls over, we have access to the pageX and pageY properties, which tell us where the mouse cursor is currently on the page, as shown in the box. upper left corner. Move the cursor to different places of the div element, and you will see different values ​​updated and displayed.

The bind() method can also pass in its own data through data and let the event object access it, or it can be used in the binding Set the value when the event is specified, and be able to read this value when the event is called

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
	var text = "Hello, world!";
	$(function(){
	$("a").bind("click", {message:text},function(event) {
	text = "hello";
	console.log(event.data.message);
	});});
</script>
	</script>

Result

We use the value as an auxiliary parameter of the bind() method Passed as a map of keys and values, pass multiple values ​​by separating them with commas. We use the data property of the event object. This property contains subproperties for each value that has been passed, meaning you can access the value of the message parameter using event.data.message. Although the value of the "text" variable is changed in the event handler, the program execution result is still "Hello, world!"

Summary: The above is the content of this article. I hope it will help everyone learn jQuery event binding. It will definitely help.

The above is the detailed content of How to use the bind() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!