小议jQuery中的事件

学了jQuery这么长时间，到这里真的有一种柳暗花明又一村的感觉，在这里先表达一下自己学这一章节的happy心情吧（在严厉的金工实习老师眼皮底下偷偷学习，当然还有各种nerves~）。

1加载DOM

在JS中浏览器装载文档通常使用window.onload方法，而在jQuery中使用的是$(document).ready()方法~这两人区别在哪里呢，JS必须等每一幅图片加载完毕后才能进行操作，网页的所有元素对jQuery而言都是可以访问的，但这并不意味着这些元素关联的文件都已经下载完毕哦，只要DOM就绪就可以操作了，何苦等所有图片都下载完毕，so,速度就这样相形见绌了~还有一点就是JS的onload事件一次只能保存对一个函数的引用，他会自动用后面的函数覆盖前面的函数，因而不在现有的行为上添加新的行为，所以为了达到两个函数顺序触发的效果JS会选择

 window.onload=function(){
     one();
     two();
 }

但这种方法不能解决某些需求例如多个文件使用window.onload方法加载多个JS文件。这样我们就可以每次调用$(document).ready()方法在现有行为上追加新的行为

 function one(){
     alert("one");
 }
 function two(){
     alert("two");
 }
 $().ready(function(){
     one();
 })
 $().ready(function(){
     two();
 });

2事件绑定

bind()方法调用格式为

bind(type [,data], fn);

第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。

与ready()方法一样，bind()方法也可以多次调用，在代码中如果发现$(this).next()被多次调用，可以为它定义一个局部变量

 $(function(){
     $("#panel h5.head").bind("click",function(){
         var $content=$(this).next();
         if($content.is(":visible")){
             $content.hide();
         }else{
             $content.show();
         }
     })
 })

改变绑定事件的类型及简写绑定事件

 $(function(){
      $("#panel h5.head").mouseover(function(){
          $(this).next().show();
      }).mouseout(function(){
          $(this).next().hide();
      })
  })

3合成事件

jQuery有两个合成事件，那就是被我们灰常广泛的应用的hover()和toggle()方法，属于自定义方法。

hover()方法的结构为：

hover(enter,leave);该方法用于模拟光标悬停事件，当光标移动到元素上时会触发指定的enter,移出时会触发leave.

eg:

$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();
    });
});

toggle()方法可谓是老生常谈了，这里就不多啰嗦什么了吧~

结构：

toggle(fn1,fn2,fn3,...fnN);模拟鼠标连续单击事件，每次单击都是重复对这几个函数的轮番调用。

4事件冒泡和事件捕获

事件冒泡和事件捕获是一个相反的过程。

很多情况下事件冒泡会产生很多问题，那么如何停止事件冒泡呢~（event.stopPropagation();可谓是杀手锏~

5阻止默认行为

网页中的元素有自己的默认行为，eg单击超链接人家就会跳转，单击提交按钮后表单会提交，但有时我们需要阻止元素的默认行为，

比如当表单不符合提交条件时要阻止表单的提交。在jQuery中我们亮剑"preventDefault()"方法来阻止元素的默认行为。

 <script type="text/javascript">
 $(function(){
     $("#sub").bind("click",function(event){
         var usename=$("#username").val();
         if(username==""){
             $("#msg").html("<p>文本框内容不能为空</p>>");
             event.preventDefault();

         }
     });
 })

 </script>
     <form action="test.html">
     用户名：<input type="text" id="username"/>
     <input type="submit" value="提交" id="sub"/>
     </form>
     <div id="msg"></div>

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。

return false;

这可比同时调用event.preventDefault();//阻止默认行为   和  event.stopPropagation();//停止事件冒泡   简单快捷多了~

6事件对象的属性

event.type,event.target//获取到触发事件的元素.event.relatedTarget//除mouseover和mouseout外的相关元素,event.pageX和event.pageY这些属性就看名字也就明白是怎么回事了，就不多说废话了。

event.which

 $("a").mousedown(function(e){
 alert(e.which)//1=鼠标左键 2=鼠标中键 3=鼠标右键
 })

event.metaKey

众所周知，不同浏览器对<ctrl>按键的解释是不同的，有道是魔高一尺道高一丈，针对这个问题，jQuery对此进行了封装，并规定event.metaKey为键盘事件中获取<ctrl>按键。

7移除事件

关于移除事件那点说小不小的事，除了我们所熟悉的unbind()方法还有一个神奇的东西，one()方法，该方法对绑定的函数只触发一次，随后立即解除绑定关系。

8模拟操作

很多情况下是用户通过单击按钮等操作才能触发click事件，但在很多很多情况下需要模拟用户操作，这样有什么好处呢，外卖都送到宿舍门口了，不需要用户单击的才是更方便的啊~

trigger()不仅可以触发浏览器支持的具有相同名称的事件比如click ,也可以触发自定义名称的事件，关键是人家还可以传递参数

 $("#btn").trigger("click");

 $("#btn").trigger("myClick");

 $("#btn").trigger("myClick",["我的自定义"。“事件”])；

9相关元素的其他用法

A绑定多个事件类型

 $(function(){
      $("div").bind("mouseover mouseout",function(){
          $(this).toggleClass("over");
      });
  });

2添加事件命名空间，便于管理
例如可以把为元素绑定的多个事件类型用命名空间规范起来

 $(function(){
     $("div").bind("click.plugin",function(){
         $("body").append("<p>click事件</p>");
     $("div").bind("mouseover.plugin",function(){
         $("body").append("<p>mouseover事件</p>");
     $("div").bind("dblclick.plugin",function(){
         $("body").append("<p>dblclick事件</p>");
             });
     $("button").click(function(){
             $("div").unbind(".plugin")};
         });
  });

未完待续......