jquery的事件

1、页面载入事件

       $(document).ready(function)事件可以在dom加载之后就被触发，而不必等待到所有资源加载完毕。所有能带来更好的用户体验。

       若需要在页面中所有资源下载完成后触发事件，强大的jquery还提供load方法，只要将该方法绑定到相应的对象上就可以了，比如在window对象上绑定：$(window).load(function(){ …… }) 。

$(document).ready(function)事件的优点：

a、只要DOM加载完毕就会被触发，极大地提升了用户体验（尤其是对应那些网速较慢的浏览者而言，这点就显得特别重要）

b、可以重复绑定多个事件处理函数，不像window.onload事件，绑定多个事件处理函数，只有最后一个才会生效。

c、提供简写：$(document).ready(function)  、$().ready(function) 、$(function)

2、事件冒泡

       当事件发生时，事件会按照 DOM 层次结构像水泡一样不断向上只止顶端。 事件冒泡有时候会产生副作用，导致始料不及的行为。

关于事件冒泡的原理和阻止的详细介绍，可以参考我转载的一篇blog：http://blog.csdn.net/inuyasha1121/article/details/45870073

3、事件绑定与解绑

①绑定事件

       jQuery通过使用.bind()方法和one()方法为元素进行事件绑定，bind方法的声明如下：

       bind( eventType , [data] , fn名 )

       第一个参数eventType用于指定待绑定的事件，比如常见的有:click,focus,blur等，可一次性指定多个事件，多个事件之间使用英文逗号分隔；

       第二个参数是可选参数，为一个json对象，在fn函数中通过event.data通过键名获得参数值，当声明该参数的时候，将允许我们传递额外的参数给事件处理函数；

       第三个参数是事件处理函数。

    $('#foo').bind('click',{first:"1",second:"2"}, function(event){
       //函数传递的event对象，再也不要写event = event || window.event了，是不是很爽O(∩_∩)O~  
       if(event.data.first=="1"){$(this).val("欢迎光临")}
       if(event.data.second=="1"){$(this).val("")}
    })

       对一些常见的事件，jquery特别为此提供了一套简写的方法。简写方法和ready方法相类似，实现的效果也一样，只是为了编写方便而已，比如常见的 .click(fn) 、.mouseover(fn) 、.mouseout(fn) 、.mousemove(fn) 等函数。
      
②一次性的事件绑定
      就是为某元素的某事件所绑定的某函数只能被执行一次,one方法的声明如下：
      one(eventType ,[data],fn名)，参数与bind相同，使用也与bind()函数一致,不同之处就是one里的fn只能被执行一次，随后就要立即解除绑定。

③解绑事件
      就是解除与某元素的某事件绑定在一起的某函数，unbind方法的声明如下：
      unbind( eventType , fn名 )
      第一个参数eventType用于指定待绑定的事件，比如常见的有:click,focus,blur等，可一次性指定多个事件，多个事件之间使用英文逗号分隔；
      第二个参数fn名：要被解除绑定的函数名Function；
      以上俩参数都是可选参数, 如果参数为空,就是解除所有匹配元素的所有事件所绑定的函数。

    $("#btn1").unbind('click','functionName');

4、合成事件

      jquery中有两个合成事件，即hover()和toggle()方法，下面分别对hover()和toggle()方法进行介绍

     
      hover方法的语法结构如下：hover(enter,leave);

      hover方法用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的1个函数enter；当光标移出这个元素时，会触发第2个函数leave.参数都为函数名（不加括号）或直接书写函数。

      toggle方法的语法结构如下：toggle(fn1,fn2,fn3,……);
      用于模拟鼠标连续单击事件，第1次单击元素，触发指定的第1个函数fn1，再次点击同一元素，触发第2个函数fn2；若有更多函数，则依次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。

5.模拟事件

       上述绑定的一些函数,需要用户执行一定的操作才会被执行,如click事件绑定的函数需要用户单击相应的元素才会被执行。但事件触发器可以用代码模拟用户的操作动作进而执行事件所绑定的函数,而不需要用户进行某些操作。

       trigger(eventType ,[data])

       第一个参数eventType：用于指定待绑定的事件，比如常见的有:click,focus,blur等，可一次性指定多个事件，多个事件之间使用英文逗号分隔；

       第二个参数是可选参数，是一个javascript数组，传递给所触发的事件所绑定的函数的实参；

<font size="3"><span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><input id="Text2" type="text" />
<script>
</span></span></span></font>    $(function(){
<font size="3"><span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;">       </span></span></span></font>$("#Text2").click(function(event,pamas1,pamas2){
<font size="3"><span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;">       </span></span></span></font><font size="3"><span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;">       </span></span></span></font>$(this).val("trigger事件触发器"+pamas1+pamas2)
<font size="3"><span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;">       </span></span></span></font>});
    })
<span style="font-size:14px;"></span><pre name="code" class="html">    $("input[type=text]").trigger("click",["1","2"]);
<span style="font-size:14px;"></span><pre name="code" class="html"><font size="3"><span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"></script></span></span></span></font>

      
       trigger函数所触发的事件与浏览器的默认操作冲突时，该事件触发器会执行浏览器默认的操作，而triggerHandler函数则不会执行浏览器默认的操作。
       triggerHandler( eventType ,[data]) 与trigger的使用一致。

6.jQuery内置事件类型分类

⑴浏览器相关事件
error(fn) 匹配元素发生错误时触发某函数,error事件没有标准,如当图像src无效时会触发图像的error事件
load(fn) 匹配元素加载完后触发某函数,如window是在所有DOM对象加载完才触发,其他单个元素是在单个元素加载完后触发
unload(fn)
resize(fn) 匹配元素改变大小时触发某函数
scroll(fn) 滚动条发生变化时触发

⑵表单相关事件
change(fn) 在匹配元素失去焦点时触发,也会在元素获得焦点后触发
select(fn) 当用户在文本框中选中某段文字时触发
submit(fn) 提交表单时触发

⑶键盘操作相关事件
keydown(fn) 键盘按下时触发
keypress(fn) 键盘按下又弹起时触发 顺序是keydown->keyup->keypress
keyup(fn) 键盘弹起时触发

⑷鼠标操作相关事件
click(fn) 顺序是mousedown->mouseup->click
mousedown(fn)
mouseup(fn)
dblclick(fn)
mouseover(fn)
mouseout(fn)
mousemove(fn) 在匹配元素上移动时触发,事件处理函数会被传递一个变量--事件对象(其clientX,clientY属性代表鼠标坐标)

⑸界面显示相关事件
blur(fn) 匹配元素失去焦点时触发 即可是鼠标 也可使Tab键
focus(fn)

7.事件对象的常见属性

event.type 属性，用于获取事件的类型，比如说获取点击事件是click；

event.pageX,event.pageY 属性，

event.pageX/event.pageY 相当于ie中的event.x/event.x,firefox中的event.pageX/event.pageY.jquery对event.pageX/event.pageY进行了封装，使其支持多浏览器；

event.target 属性，获取触发事件的DOM元素（注意不是jquery元素）；

event.which 属性，用于获取在鼠标单击事件中，按下的是哪个键,1 = 鼠标左键， 2 =鼠标中间， 3 = 鼠标右键；

event.originalEvent 属性，指向原始的DOM事件对象；

event.preventDefault() 方法，阻止默认事件；

event.stopPropagation() 方法，阻止冒泡；

event.relatedTarget 属性，在标准的DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget 属性来访问的。event.relatedTarget方法在mouseover中相当于ie浏览器中的event.fromElement()方法，在mouseout中相当于ie浏览器的event.toElement方法，jquery对其进行了封装，使之兼容多种浏览器。