1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .result{ 8 300PX; 9 height: 100PX; 10 border: solid; 11 } 12 </style> 13 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 14 15 </head> 16 <body> 17 <p>input 元素</p> 18 <p>监听value值的变化，当有改变时，失去焦点后触发change事件，对于单选按钮和复选框，当用户用鼠标作出选择时，该事件立即被触发</p> 19 <p>select元素</p> 20 <p>对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发</p> 21 <p>texta</p> 22 <p>多行文本输入框，当有改变时，失去焦点时触发change事件</p> 23 24 <div class='left'> 25 <input class="target1" type="text" value="监听input的改变"/> 26 27 </div> 28 <div class='d1'> 29 select: 30 <select class="sl"> 31 <option value="option1" selected="selected">option1</option> 32 <option value="option3" selected="selected">option3</option> 33 34 </select> 35 36 </div> 37 <div class='3'>textarea: 38 <textarea class="aa3" rows="5" cols="30">多行文本的输入控件 39 </textarea> 40 41 </div> 42 <p>输出结果：</p> 43 <div class="result"></div> 44 <script> 45 //监听input的改变 46 $('.target1').change(function(e){ 47 $('.result').html(e.target.value); 48 }); 49 //监听select 50 $('.sl').change(function(e){ 51 $('.result').html(e.target.value); 52 }); 53 //监听textarea 54 $('.aa3').change(function(e){ 55 $('.result').html(e.target.value); 56 }); 57 </script> 58 </body> 59 </html>
运行结果：
