Detailed explanation of the use of jQuery.change() function

The change() function is used to bind a handler function to the change event of each matching element. This function can also be used to trigger change events. In addition, you can also pass some additional data to the Event Handling function.

The change event is triggered when the text content or options are changed. This event only applies to and and <select>. For text and textarea elements, this event occurs when the element loses focus (the text content also changes). </select>

In addition, you can call this function multiple times for the same element to bind multiple event handlers. When the change event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via change(), use the unbind() function.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.change( [ [ data ,]  handler ] )

If at least one parameter is specified, it means binding the handler function of the change event; if no parameters are specified, it means the change event is triggered.

Parameters

jQuery 1.4.3 New support: change() supports data parameters.

This in the parameter handler points to the current DOM element. change() will also pass in a parameter to the handler: the Event object representing the current event.

If the return value of the function handler is false, it means to prevent the element's default event behavior and stop the event from bubbling in the DOM tree. For example, if the handler function of the click event of the link returns false, the default URL jump behavior of the link can be prevented.

<input id="name" name="name" type="text" value="CodePlayer" />
<input id="age" name="age" type="text" value="20" />
<select id="gender" name="gender">
    <option value="男">男性</option>
    <option value="女">女性</option>
</select>
<div id="msg">姓名：[<label for="name">CodePlayer</label>]，年龄：[<label for="age">20</label>]岁，性别：[<label for="gender">男</label>]</div>

function handler(event){
    $("label[for='" + this.name + "']").html( this.value ); 
}

$(":text").change( handler );
$("#gender").change( handler );

// 触发所有text元素的change事件
// $(":text").change( );

var map = { name: "姓名", age: "年龄", gender: "性别" };

function logHandler(event){
    var map = event.data;
    $("#msg").append( new Date().toLocaleString() + &#39; [&#39; + map[this.name] + &#39;]发生了更改<br>&#39; ); 
}

// 记录所有输入每次更改的时间
$(":text").change( map, logHandler );
$("#gender").change( map, logHandler );