小议jQuery中的事件那些我们知道和不知道的秘密

浏览数：36 / 时间：2015年06月09日

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

1加载DOM

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

1 window。onload=function(){
2     one();
3     two();
4 }

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

 1 function one(){
 2     alert("one");
 3 }
 4 function two(){
 5     alert("two");
 6 }
 7 $().ready(function(){
 8     one();
 9 })
10 $().ready(function(){
11     two();
12 });

2事件绑定

bind()方法调用格式为

bind(type [,data], fn);

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

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

 1 $(function(){
 2     $("#panel h5.head").bind("click",function(){
 3         var $content=$(this).next();
 4         if($content.is(":visible")){
 5             $content.hide();
 6         }else{
 7             $content.show();
 8         }
 9     })
10 })

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

1 $(function(){
2      $("#panel h5.head").mouseover(function(){
3          $(this).next().show();
4      }).mouseout(function(){
5          $(this).next().hide();
6      })
7  })

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()"方法来阻止元素的默认行为。

 1 <script type="text/javascript">
 2 $(function(){
 3     $("#sub").bind("click",function(event){
 4         var usename=$("#username").val();
 5         if(username==""){
 6             $("#msg").html("<p>文本框内容不能为空</p>>");
 7             event.preventDefault();
 8 
 9         }
10     });
11 })
12 
13 </script>
14     <form action="test.html">
15     用户名：<input type="text" id="username"/>
16     <input type="submit" value="提交" id="sub"/>
17     </form>
18     <div id="msg"></div>

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

return false;

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

6事件对象的属性

event.type,event.target.event.relatedTarget,event.pageX和event.pageY这些属性就看名字也就明白是怎么回事了，就不多说废话了。

event.which

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

event.metaKey

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

7移除事件

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

8模拟操作

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

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

1 $("#btn").trigger("click");
2 
3 $("#btn").trigger("myClick");
4 
5 $("#btn").trigger("myClick",["我的自定义"。“事件”])；

9相关元素的其他用法

A绑定多个事件类型

1 $(function(){
2      $("div").bind("mouseover mouseout",function(){
3          $(this).toggleClass("over");
4      });
5  });

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

 1 $(function(){
 2     $("div").bind("click.plugin",function(){
 3         $("body").append("<p>click事件</p>");
 4     $("div").bind("mouseover.plugin",function(){
 5         $("body").append("<p>mouseover事件</p>");
 6     $("div").bind("dblclick.plugin",function(){
 7         $("body").append("<p>dblclick事件</p>");
 8             });
 9     $("button").click(function(){
10             $("div").unbind(".plugin")};
11         });
12  });