jQuery——事件处理

1、事件流模型
    如果单击一次在HTML页面上的某个按钮，不仅会触发按钮的单击事件，还将触发按钮所属容器(div、span)等的单击事件，同时还将触发父级容器的单击事件，直至body、html和document，这一动作造成一脸串的事件触发，形成一个事件流。因为事件流模型不同，总体可以分为冒泡型事件流和捕获型事件流两种。
       1）冒泡型事件流：冒泡型事件流将从下到上一级一级的触发事件流。
       2）捕获型事件流：捕获型事件流将从上到下一级一级的触发事件流。
   一般使用的是冒泡型事件流。
2、js事件种类
   1）鼠标事件： ondbclick(双击)、 onmouseout(光标离开某对象范围)
   2）键盘事件
       onkeydown：当键盘上的某个键被按下时触发此事件。
       onkeypress: 当键盘上的某个键被按下以后触发此事件。
       onkeyup：当键盘上的某个按键被释放时触发此事件 。
   3）页面事件
       onerror：出现错误时触发此事件
       onload：页面内容完成时触发此事件
       onresize：当浏览器的窗口大小被改变时触发此事件
       onscroll：浏览器的滚动条位置发生变化时触发
       onunload：当前页面被改变时触发
   4）表单事件
       onblur：当前元素失去焦点时触发
       onchange：当前元素失去焦点并且元素的内容发生改变时触发此事件
       onfocus：当某个元素获得焦点时触发
       onsubmit：当某个表单被提交时触发此事件

3、jQuery事件
   jQuery提供了一个DOM加载完成的事件，即ready事件，ready事件是一个可以在DOM加载完成后执行的事件，该事件可以绑定多个响应函数，这个事件
是window.onload一样，ready事件是在所有DOM标记就绪时就被触发，而不一定与之关联的其他资源文件也能就绪。
   /* document 对象加载成功 */  
   $(document).ready(function(){  
       alert('document load');
   });  
   /* window 加载成功 */  
   $(window).ready(function(){  
       alert('window load');
   });  
   /* ID为show的DIV加载成功 */  
   $("#show").ready(function(){  
       //...
   });        
   /* html 标签加载成功 */  
   $("html").ready(function(){  
       //...
   });
   //...对于任何dom都可以使用这个方法，当该节点加载成功执行方法。    
   1）表单事件
    a、focus: 控件获得焦点时触发
       blur: 控件失去焦点时触发
       $("input").focus(function(){  
           /* 获得焦点 */  
       })  
       .blur(function(){  
           /* 失去焦点 */  
       });  
    b、change: 控件值改变时触发
       $("input[name=username]").change(function(){  
           /* 值改变时触发 */  
           alert("用户名文本框内容已改变。");  
       });  
    c、select: 空间内容被选中时触发  
    d、submit: 表单提交时触发
    e、focusin: 当前元素或其子元素获得焦点时触发
       focusout: 当前元素或其子元素失去焦点时触发
   2）其他事件    
       load：当该元素加载就绪后触发
       upload: 当该元素卸载后触发
       error：当该元素发生错误时触发
       resize：当浏览器改变大小时触发
       scroll：当浏览器滚动条位置改变时触发
3、JQuery事件处理
   1)事件绑订   event / e1.html
       bind(type,[data],fn)
           type:事件类型
           data:可省略，{参数：值，...}
           fn:事件处理函数
       bind(map)
           一次绑定多个事件map是键值对{click:function1,...}也可以直接写匿名方法。
   2)绑订方式的简写形式
       click(function(){});
   3)合成事件 event/e2.html  e3.html
       hover(enter,leave) : 模拟光标悬停事件，即mouseover事件和mouseout事件
           $('.s1').hover(function(){
               $(this).addClass('s2');
               },function(){
                   $(this).removeClass('s2');
           });
       toggle(fn1,fn2...)：模拟鼠标连续单击事件
       live(type, fn)：                该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序
   4)删除事件
       unbind([type], data)：删除匹配对象的事件处理程序，对应bind方法，它可以删除所有以bind方式绑定的自定义事件处理程序
           $("#b").unbind("click");
       die([type][,fn])：die方法与live方法对应，用于解除用live注册的自定义事件 ，type用于指定要删除的事件类型，fn用于指定要删除的事件处理程序的名称。
4、jQuery事件对象的属性与方法
   属性：
       type：获得该事件对象的事件类型，如click、focus、mouseover等
       target：获得事件触发者(DOM对象)
       data：获得调用事件时传入的额外参数集合
       relatedTarget：获得触发鼠标事件的DOM元素
       currentTarget：获得当前DOM元素(等同于this关键字)
       pageX/pageY：获得鼠标事件中，鼠标光标相对于页面左上角的位置
       result：获得上一个事件处理函数返回的值
       timeStamp：获得事件发生的事件戳
   方法：
       preventDefault()：阻止默认的事件行为
       isDefaultPrevent()：是否执行过preventDefault()方法
       stopPropagation()：停止事件冒泡
       isPropagationStopped()：是否调用了stopPropagation()方法
       stopImmediatePropagation()：中止处理该事件，该方法将停止该事件的其他事件处理程序，并且停止事件冒泡
       isImmediatePropagationStopped()：是否调用了stopImmediatePropagation()方法

       例：
       $(function(){
           $('#a1').click(function(e){
               alert("你点击了一个链接");
               //停止冒泡
               e.stopPropagation();
           });            
           $('#a2').click(function(e){
               var flag = confirm('确定删除吗');
               if(!flag){
                   e.preventDefault();
               }
           });
       });

4、事件冒泡 event/ e4.html
       a,什么是事件冒泡?
           子节点产生的事件会依次向上抛给相应的父节点。
       b,如何取消事件冒泡?
           event.cancelBubble = true;
       c, 如何获得事件对象?
           只需要给事件处理函数添加event作为参数，比如
       d, 事件对象的作用?
            作用1： 找到事件源
                event.target;    firefox,chrome支持
                event.srcElement;  ie支持
                event.target || event.srcElement
            作用2:   获得鼠标点击的坐标
                event.clientX;
                event.clientY;
       (1)获得事件对象 event / e5.html
           只需要给事件处理函数传一个参数。
           click(function(event){});
       (2)事件对象的作用  
           a,获得事件源
               event.target;
           b,获得鼠标点击的坐标
               event.pageX
               event.pageY
           c,事件类型
               event.type
       (3)停止冒泡   event / e6.html
           event.stopPropagation()
       (4) 停止默认行为
           event.preventDefault()
       5)模拟操作 event / e7.html
           trigger('click')

           //$('#username').trigger('focus');
           //也可以简化成
           $('#username').focus();

公司主营业务：成都做网站、成都网站制作、成都外贸网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出垣曲免费做网站回馈大家。