表单事件

开发工具与关键技术：Visual Studio / 表单事件
作者：郑名方
撰写时间：2019年4月 20日

jQuery表单事件 表单默认提交方式为：
（1）action URL 规定当表单时向何处发送表单数据。
（2） method get/post 规定用于发送 form-data 的HTML方法。Method 定义和用法 method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。表单数据可以作为URL 变量（method=”get”）或者HTML post （method=”post”）的方法发送。

函数	描述
focusout()	将一个事件函数绑定到“focusout“事件
blur()	为“blur”事件绑定一个处理函数，或者触发元素上的“blur”事件（注释：此事件不支持冒泡）
-change（）-	为JavaScript的“change”事件绑定一个处理函数，或者触发元素上的“change”事件–
focus（）	为JavaScript的“focus”事件绑定一个处理函数，或者触发元素上的“focus”事件
focusin（）	将一个事件函数绑定到“focusin“事件
-select（）-	- 为JavaScript的”select“事件绑定一个处理函数，或者触发元素上的该事件-
submit（）	为JavaScript的”submit“事件绑定一个处理函数，或者触发元素上的该事件

jQuery表单事件之change事件每当事件触发时执行的一个函数。元素，和元素的值都是可以改变的，开发者可以通过change事件去监听这些改变的动作 元素监听value值的变化，当有改变时，失去焦点触发change事件。对于单选按钮和复选框，当用户鼠标做出选择时，该事件立即触发。元素对于选择框，当用户鼠标作出选择时，该事件立即触发。元素多行文本输入框，当有改变时，失去焦点触发change事件。
一个对象，它包含的数据键值对映射将被传递给事件处理程序。每当事件触发时执行的一个函数下面代码的来源是老师上课。

   <form class="form-horizontal" action="/jQueryEvent/ChapterTwoMouseEvent">
            <div class="form-group">
                <label for="target1">文本input:</label>
                <input type="text" class="form-control" id="target1">
            </div>
            <div class="form-group">
                <label for="target2">下拉框select:</label>
                <select class="form-control" id="target2">
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="target3">大文本textarea:</label>
                <textarea class="form-control" rows="5" id="target3"></textarea>
            </div>
            <div class="form-group">
                <input class="form-control" style="font-size:20px;" id="result">
            </div>
            <div class="form-group">
                <button class="btn btn-primary"  id="btnSubmit">表单提交</button>
            </div>
        </form>

事件处理函数可以绑定到文本输入和下拉选择框：

$(‘. form-control’).change(function(){
Alert(‘Handler for .change() called’);
});
现在，当下菜单中第二个选项被选择，提示框显示。如果你改变字段中的文本，然后点击其他地方，提示框也会显示。如果该字段失去焦点没有改变内容，该事件不会触发。应用不带参数的change(),我们可以手动触发这个事件：
$(‘#target2’).click(function(){
$(‘.other’)change();
});
当用户在一个元素中进行文本选择时，这个元素上的select事件就会被触发。此事件只能用在和。

<form>
           <div class="form-group">
                <label for="target1">文本input:</label>
                <input type="text" class="form-control" id="target1">
            </div>
            <div class="form-group">
                <label for="target2">下拉框select:</label>
                <select class="form-control" id="target2">
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>
            <div class="form-group" id="other">
                <label for="target3">大文本textarea:</label>
                <textarea class="form-control" rows="5" id="target3"></textarea>
            </div>
            <div class="form-group">
                <input class="form-control" style="font-size:20px;" id="result">
            </div>
            <div class="form-group">
                <button class="btn btn-primary" id="btnSubmit">表单提交</button>
            </div>
        </form>
        
这个事件处理程序可以绑定到文本框
$(‘#target1’).select(function(){
   Alert(‘Handler for .select() called’);
});
   现在文本框的任何字符被选中，将被警告数据、元素、文档都被显示出来。设置插入点的位置将不会触发该事件。应用如果不带参数select()，可以手动触发这个事件：
$(‘#other’).click(function(){
$(‘#target4’).select();
});