@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ChapterTwoFormEvent</title>
<link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.content {
width:220px;
height:100px;
border:1px solid #ccc;
margin:20px auto;
padding:20px;
}
.changeColor {
background:#b5a0d7;
}
.setBorder {
border:3px solid #453979;
}
</style>
</head>
<body>
<div id="demo" class="content">
<input type="text" name="" id="txtdemo"/>
</div>
<script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<script>
//2-1 jQuery鼠标事件之focusin事件 与 focusout事件
//jQuery表单事件之focus与blur事件
//focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
//focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
//注意查看 下面事件所选取的元素 思考focusin与focus的区别
//分别取消注释查看focusin与focus的区别
$("#demo").focusin(function () {
$(this).addClass("changeColor");
});
$("#demo").focusout(function () {
$(this).removeClass("changeColor");
});
//演示下面的focus的效果时，请注释上面的内容
//$("#txtdemo").focus(function () {
// $(this).addClass("setBorder");
//});
//$("#txtdemo").blur(function () {
// $(this).removeClass("setBorder");
//});
</script>
<div class="container">
<form class="form-horizontal" action="/jQueryEvent/ChapterTwoMouseEvent">
<!--onsubmit="return false;" 禁止表单自动提交-->
<div class="form-group">
<label class="control-label col-md-3">input:</label>
<div class="col-md-4">
<input type="text" class="form-control" id="target1" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">select:</label>
<div class="col-md-4">
<select class="form-control" id="target2">
<option>option1</option>
<option>option2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">textarea:</label>
<div class="col-md-4">
<textarea class="form-control" id="target3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4" style="font-size:20px;" id="result"></div>
</div>
<div class="form-group">
<button class="btn btn-primary col-md-offset-4" id="btnSubmit">表单提交</button>
</div>
</form>
</div>
<script>
//2-2 jQuery表单事件之change事件
//<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
/*
input元素
监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素
对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
textarea元素
多行文本输入框，当有改变时，失去焦点后触发change事件
*/
//input标签的change事件
$("#target1").change(function (e) {
console.log(e);
$("#result").html(e.target.value);
});
//select标签的change事件
$("#target2").change(function (e) {
console.log(e);
$("#result").html(e.target.value);
});
//textarea标签的change事件
$("#target3").change(function (e) {
console.log(e);
$("#result").html(e.target.value);
});
//2-3 jQuery表单事件之select事件
/*当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
select事件只能用于<input>元素与<textarea>元素*/
//input 元素中的文本被选择时触发
$("input").select(function () {
alert("input标签的文本被选中事件");
});
//textarea元素中的文本被选择时触发
$("textarea").select(function () {
alert("textarea标签的文本被选中事件");
});
//2-4 jQuery表单事件之submit事件
/*提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作
使用上非常简单，与基本事件参数处理保持一致
这里需要特别注意：
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
<form onsubmit="return false;"></form>， jQuery中可以直接在函数中最后结尾return false即可
*/
//如果你要阻止表单提交:
/*jQuery 代码:
$("form").submit( function () {
return false;
} );
*/
//禁止浏览器的默认提交行为
//$("#btnSubmit").submit(function () {
// return false;
//});
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
