jQuery:自学笔记(4)——事件与事件对象
jQuery中的事件
什么是事件
所谓事件，就是被对象识别的操作，即操作对象队环境变化的感知和反应，例如单击按钮或者敲击键盘上的按键。
所谓事件流，是指HTML文档使用的是DOM模型，而该模型是从上到下一级一级的结构，因此就会触发一连串的对象。例如单击HTML页面上的某个按钮时，不仅会触发按钮的单击事件，还会触发安装所属容器div的单击事件，同时还会触发父级别容器的单击事件。
jQuery中支持的事件和事件类型
| 方法 | 描述 |
|---|---|
| bind() | 向元素添加事件处理程序 |
| blur() | 添加/触发 blur 事件 |
| change() | 添加/触发 change 事件 |
| click() | 添加/触发 click 事件 |
| dblclick() | 添加/触发 double click 事件 |
| delegate() | 向匹配元素的当前或未来的子元素添加处理程序 |
| die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
| error() | 在版本 1.8 中被废弃。添加/触发 error 事件 |
| event.currentTarget | 在事件冒泡阶段内的当前 DOM 元素 |
| event.data | 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 |
| event.delegateTarget | 返回当前调用的 jQuery 事件处理程序所添加的元素 |
| event.isDefaultPrevented() | 返回指定的 event 对象上是否调用了 event.preventDefault() |
| event.isImmediatePropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() |
| event.isPropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopPropagation() |
| event.namespace | 返回当事件被触发时指定的命名空间 |
| event.pageX | 返回相对于文档左边缘的鼠标位置 |
| event.pageY | 返回相对于文档上边缘的鼠标位置 |
| event.preventDefault() | 阻止事件的默认行为 |
| event.relatedTarget | 返回当鼠标移动时哪个元素进入或退出 |
| event.result | 包含由被指定事件触发的事件处理程序返回的最后一个值 |
| event.stopImmediatePropagation() | 阻止其他事件处理程序被调用 |
| event.stopPropagation() | 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知 |
| event.target | 返回哪个 DOM 元素触发事件 |
| event.timeStamp | 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 |
| event.type | 返回哪种事件类型被触发 |
| event.which | 返回指定事件上哪个键盘键或鼠标按钮被按下 |
| focus() | 添加/触发 focus 事件 |
| focusin() | 添加事件处理程序到 focusin 事件 |
| focusout() | 添加事件处理程序到 focusout 事件 |
| hover() | 添加两个事件处理程序到 hover 事件 |
| keydown() | 添加/触发 keydown 事件 |
| keypress() | 添加/触发 keypress 事件 |
| keyup() | 添加/触发 keyup 事件 |
| live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
| load() | 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 |
| mousedown() | 添加/触发 mousedown 事件 |
| mouseenter() | 添加/触发 mouseenter 事件 |
| mouseleave() | 添加/触发 mouseleave 事件 |
| mousemove() | 添加/触发 mousemove 事件 |
| mouseout() | 添加/触发 mouseout 事件 |
| mouseover() | 添加/触发 mouseover 事件 |
| mouseup() | 添加/触发 mouseup 事件 |
| off() | 移除通过 on() 方法添加的事件处理程序 |
| on() | 向元素添加事件处理程序 |
| one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
| $.proxy() | 接受一个已有的函数，并返回一个带特定上下文的新的函数 |
| ready() | 规定当 DOM 完全加载时要执行的函数 |
| resize() | 添加/触发 resize 事件 |
| scroll() | 添加/触发 scroll 事件 |
| select() | 添加/触发 select 事件 |
| submit() | 添加/触发 submit 事件 |
| toggle() | 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数 |
| trigger() | 触发绑定到被选元素的所有事件 |
| triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 |
| unbind() | 从被选元素上移除添加的事件处理程序 |
| undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
| unload() | 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 |
页面初始化事件
说明
页面加载事件是jQuery提供的事件处理模块中最重要的一个函数，它可以极大地提高Web应用程序的响应速度。
简而言之，就是对window.onload事件的替代：
$(document).ready(function{....})
实例
绑定事件
说明
一般会在页面加载事件中为DOM中的元素关联事件，jQuery封装了DOM元素的事件处理方法，jQuery提供了一些绑定标准事件的简单方法，比如$('#buttons').click()；这样的绑定方式。 jQuery还提供了一个名为bind()的方法专门用于事件绑定。
$(selector).bind(event,data,funcion)
☐ event可以是所有的JavaScript事件对象。
☐ 可选的data参数作为event.data属性值传递给事件对象的额外数据对象。
☐ function用来绑定的处理函数，一般事件处理代码写在这个函数体内。
实例
解除绑定事件
说明
移除事件绑定，使用unbind()方法，该方法会从指定的元素上删除一个事件和处理程序。
$(selector).unbind(event,function)
☐如果不指定unbind的任何参数，将移除选定元素上的所有的事件处理程序。
☐参数event指定要解除的事件，多个事件之间用空格分割
☐function指定要取消绑定的函数名
实例
表单中的常见事件
表单元素焦点的获取和失去
1.设计一个类样式
2.绑定事件
3.完成
表单的验证
实现效果：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding-top:100px;"> <form class="form-horizontal" id="form">
<div class="form-group">
<label class="col-sm-2 control-label">产品名称</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="pName" required="true" required-message="请输入产品名称"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">产品数量</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="pNum" check-type="number" check-type-msg="请输入数值"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">产品类型</label>
<div class="col-sm-4">
<select name="pType" class="form-control" required="true" required-message="请选择产品类型">
<option value=""></option>
<option value="1">电脑</option>
<option value="2">CPU</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<input type="button" id="form-submit" value="提 交"/>
</div>
</div>
</form>
</div> <script>
//是否必填:required, required-msg
//数据类型:check-type, check-type-msg
//数据范围:min,max, min-msg,max-msg
//字符串长度:minLenth,maxLength, minLength-msg, maxLength-msg $(function() {
//验证input输入框值
$("#form").find("input").each(function(){
$(this).blur(function(){
validateEl($(this));
})
}) //验证下拉框值
$("#form").find("select").each(function(){
$(this).blur(function(){
validateEl($(this));
})
}) //表单提交验证所有值
$("#form-submit").click(function() {
var flag = true;
$("#form").find("input").each(function(){
flag = flag & validateEl($(this));
}) $("#form").find("select").each(function(){
flag = falg & validateEl($(this));
})
if(flag) {
$("#form").submit();
}
}) var validateEl = function(el) {
var result = validateField(el);
var controlGroup = el.parents('.form-group');
if(result.result) {
controlGroup.removeClass('has-error');
} else {
controlGroup.find(".help-block").remove();
controlGroup.addClass('has-error');
el.after('<span class="help-block">' + result.errorMsg +'</span>');
}
return result.result;
} var validateField = function(field) {
var el = $(field);
//验证非空表单
var required = el.attr("required");
if(required && required == "required") {
var requiredMsg = el.attr("required-message");
requiredMsg = requiredMsg ? requiredMsg : "该项不能为空";
var value = el.val();
if(value == null || $.trim(value) == "") {
return {result:false, errorMsg:requiredMsg};
}
} //验证表单数据类型
var checkType = el.attr("check-type");
if(checkType) {
var value = el.val();
var checkTypeMsg = el.attr("check-type-msg");
checkTypeMsg = checkTypeMsg ? checkTypeMsg : "请填写正确的数据格式";
if(checkType == "number") {
if(validRules.checkNumber(value)) {
return {result:false, errorMsg:checkTypeMsg};
}
} else if(checkType == "int") {
if(validRules.checkInt(value)) {
return {result:false, errorMsg:checkTypeMsg};
}
} else if(checkType == "url") {
if(validRules.checkUrl(value)) {
return {result:false, errorMsg:checkTypeMsg};
}
} else if(checkType == "email") {
if(validRules.checkEmail(value)) {
return {result:false, errorMsg:checkTypeMsg};
}
} else if(checkType == "mobile") {
if(validRules.checkMobile(value)) {
return {result:false, errorMsg:checkTypeMsg};
}
}
} //验证字符串长度
var minLength = el.attr("minLength");
var minLengthMsg = el.attr("minLengthMsg");
minLengthMsg = minLengthMsg ? minLengthMsg : "请输入正确的字符长度";
if(minLength) {
var value = el.val();
if(value.length <= minLength) {
return {result:false, errorMsg:minLengthMsg};
}
}
var maxLength = el.attr("maxLength");
if(maxLength) {
var maxLengthMsg = el.attr("maxLengthMsg");
maxLengthMsg = maxLengthMsg ? maxLengthMsg : "请输入正确的字符长度";
if(value.length > maxLength) {
return {result:false, errorMsg:minLengthMsg};
}
} //验证数值大小
var min = el.attr("min");
if(min && !isNaN(min)) {
var value = el.val();
var minMsg = el.attr("min-msg");
minMsg = minMsg ? minMsg : "请输出正确的数值";
if(isNaN(value) || value <= min) {
return {result:false, errorMsg:minMsg};
}
}
var max = el.attr("max");
if(max && !isNaN(max)) {
var value = el.val();
var maxMsg = el.attr("max-msg");
maxMsg = maxMsg ? maxMsg : "请输入正确数值";
if(isNaN(value) || value > max) {
return {result:false, errorMsg:maxMsg};
}
} return {result:true};
} var validRules = {
checkInt:function(value) {
return (!/^[0-9]\d*$/.test(value));
},
checkNumber:function(value) {
return (!/^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value));
},
checkEmail:function(value) {
return (!/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value));
},
checkUrl:function(value) {
!/^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value)
},
checkMobile:function(value) {
return (!/^0?(13[0-9]|15[0-9]|17[0678]|18[0-9]|14[57])[0-9]{8}$/.test(value));
}
}
})
</script>
</body>
</html>