change()函数用于为每个匹配元素的change事件绑定处理函数。该函数也可用于触发change事件。此外，你还可以额外传递给事件处理函数一些数据。 change事件会在文本内容或选项被更改时触发。该事件仅适用于和以及<select>。对于text和textarea元素，该事件会在元素失去焦点时发生(文本内容也发生了更改)。</p> <p>此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发change事件时，<a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a>会按照绑定的先后顺序依次执行绑定的事件处理函数。</p> <p>要<a href="http://www.php.cn/php/php-tp-remove.html" target="_blank">删除</a>通过change()绑定的事件，请使用unbind()函数。</p> <p>该函数属于jQuery对象(实例)。</p> <p style='margin: 1em 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(170, 170, 170); border-left-color: initial; border-image: initial; outline: 0px; font-size: 20px; vertical-align: baseline; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-weight: normal; font-stretch: normal; line-height: 1.5; font-family: "Courier New", SimSun; color: rgb(0, 0, 204); white-space: normal;'>语法</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">jQueryObject.change( [ [ data ,] handler ] )</pre><div class="contentsignin">登录后复制</div></div><p>如果指定了至少一个参数，则表示绑定change事件的处理函数；没有指定任何参数，则表示触发change事件。</p><p style="margin: 1em 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(170, 170, 170); border-left-color: initial; border-image: initial; outline: 0px; font-size: 20px; vertical-align: baseline; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-weight: normal; font-stretch: normal; line-height: 1.5; font-family: "Courier New", SimSun; color: rgb(0, 0, 204); white-space: normal;">参数</p><p><img src="https://img.php.cn//upload/image/220/691/213/1498526150422288.png" title="1498526150422288.png" alt="1609.png"/></p><p>jQuery 1.4.3 新增支持：change()支持data参数。</p><p>参数handler中的this指向当前DOM元素。change()还会为handler传入一个参数：表示当前事件的Event对象。</p><p>如果函数handler的返回值为false，则表示阻止元素的默认事件<a href="http://www.php.cn/php/php-tp-behavior.html" target="_blank">行为</a>，并停止事件在DOM树中冒泡。例如，<a>链接的click事件的处理函数返回false，可以阻止链接的默认URL跳转行为。<form>表单的submit事件的处理函数返回false，可以阻止表单默认的表单提交行为。</p><p style="max-width:90%">返回值</p><p>change()<a href="http://www.php.cn/code/6029.html" target="_blank">函数的返回值</a>为jQuery类型，返回当前jQuery对象本身。</p><p style="margin: 1em 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(170, 170, 170); border-left-color: initial; border-image: initial; outline: 0px; font-size: 20px; vertical-align: baseline; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-weight: normal; font-stretch: normal; line-height: 1.5; font-family: "Courier New", SimSun; color: rgb(0, 0, 204); white-space: normal;">示例&说明</p><p>请参考下面这段初始HTML代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><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></pre><div class="contentsignin">登录后复制</div></div><p>现在，我们为所有元素的change事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function handler(event){ $("label[for='" + this.name + "']").html( this.value ); } $(":text").change( handler ); $("#gender").change( handler ); // 触发所有text元素的change事件 // $(":text").change( );</pre><div class="contentsignin">登录后复制</div></div><p>我们还可以为事件处理函数传递一些附加的数据。此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">var map = { name: "姓名", age: "年龄", gender: "性别" }; function logHandler(event){ var map = event.data; $("#msg").append( new Date().toLocaleString() + ' [' + map[this.name] + ']发生了更改<br>' ); } // 记录所有输入每次更改的时间 $(":text").change( map, logHandler ); $("#gender").change( map, logHandler );</pre><div class="contentsignin">登录后复制</div></div>
