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.完成

　　表单的验证

原文链接：jQuery 表单验证通用实现方法

实现效果：

完整代码：

<!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>