jQuery事件

jQuery事件:
一、jQuery页面载入事件

(

d

o

c

u

m

e

n

t

)

.

r

e

a

d

y

(

)

方

法

当

D

O

M

载

入

就

绪

可

以

查

询

及

操

纵

时

绑

定

一

个

要

执

行

的

函

数

。

这

是

事

件

模

块

中

最

重

要

的

一

个

函

数

，

因

为

它

可

以

极

大

地

提

高

w

e

b

应

用

程

序

的

响

应

速

度

。

简

单

地

说

，

这

个

方

法

纯

粹

是

对

向

w

i

n

d

o

w

.

l

o

a

d

事

件

注

册

的

替

代

方

法

。

通

过

使

用

这

个

方

法

，

可

以

在

D

O

M

载

入

就

绪

能

够

读

取

并

操

纵

时

立

即

调

用

你

所

绑

定

的

函

数

，

而

99.99

注

意

：

可

以

在

同

一

个

页

面

中

无

限

次

地

使

用

(document).ready() 方法 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load事件注册的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。 注意：可以在同一个页面中无限次地使用

(document).ready()方法当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单地说，这个方法纯粹是对向window.load事件注册的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99注意：可以在同一个页面中无限次地使用(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
参数说明：fn 要在DOM就绪时执行的函数
二、jQuery中的鼠标事件
1. click() 鼠标单击事件 // js onclick
2. dblclick() 鼠标双击事件 // js ondblclick
3. mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
4. mouseup() 当在元素上放松鼠标按钮时，会发生 mouseup 事件。
5. mouseenter() 当鼠标指针穿过元素时，会发生mouseenter事件。该事件大多数时候会与mouseleave 事件一起使用。
6. mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter事件一起使用
7. mouseover() 当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候与 mouseout事件一起使用
8. mouseout() 当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用
9. mousemove() 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。 mousemove
事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
注意！！！
mouseover与mouseenter的区别：
mouseover如果鼠标指针穿过选定元素的任何子元素，都会触发mouseover事件，
mouseenter如果鼠标指针穿过选定元素的任何子元素不会触发mouseenter事件
mouseout与mouseleave的区别：
mouseout不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。
mouseleave只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件
jQuery鼠标事件之hover事件
hover([over,]out)
（1）一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一
个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
（2）当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数说明：
over,out：
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
out
当鼠标移到元素上或移出元素时触发执行的事件函数
三、表单事件
1. jQuery中的focus()获取焦点事件与blur()失去焦点事件（鼠标事件）
（1） focus() 事件
当元素获得焦点时，触发focus事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有 绑定的focus函数
（2） blur() 事件
当元素失去焦点时触发 blur 事件。
这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

     2. jQuery中的focusin()事件与focusout()事件
      （1）focusin() 事件
            当元素获得焦点时，触发 focusin 事件。
            focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
      （2）focusout() 事件
            当元素失去焦点时触发 focusout 事件。
            focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
    $(".wrap").focusin(function () {
        $(this).addClass("bgPink");
    });
    $(".wrap").focusout(function () {
        $(this).removeClass("bgPink");
    });
  3.jQuery中的表单事件 change()事件
        <input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
        input元素
            监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用			   户用鼠标做出选择时，该事件立即触发。
        select元素
            对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
        textarea元素
            多行文本输入框，当有改变时，失去焦点后触发change事件
    $("form input").change(function (event) {
        console.log(event.target.value);
    });
    $("form select").change(function () {
        var value = $(this).val();
        console.log(value);
    });
    $("form textarea").change(function () {
        console.log(event.target.value);
    });
  4 .jQuery中的表单事件 select()事件
 	  当textarea或文本类型的input元素中的文本被选择时，会发生 select 事件。
       这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。
       可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
    $("form input").select(function () {
        console.log(123);
    });

5. jQuery表单事件中的 submit()事件
   提交表单是一个最常见的业务需求，一些信息的输入都是需要表单的提交。
   同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作
   （例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作，与基本事件参数处理保持一致
   这里需要特别注意：
   form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
   ，jQuery中可以直接在函数中最后结尾
   return false即可
   

   6. 事件对象：jQuery事件对象的属性和方法
      event.type：获取事件的类型
      触发元素的事件类型：
      $(“a“).click(function(event)alert(event.type););event.pageX和event.pageY：获取鼠标当前相对于页面的坐标通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与（顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化event.preventDefault()方法：阻止默认行为这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的URL去了。我们可以用event.isDefaultPrevented()来确定这个方法是否(在那个事件对象上)被调用过了event.stopPropagation()方法：阻止事件冒泡事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数event.which：获取在鼠标单击时，单击的是鼠标的哪个键event.which将event.keyCode和event.charCode标准化了。event.which也将正常化的按钮按下(mousedown和mouseupevents)，左键报告1，中间键报告2，右键报告3event.currentTarget:在事件冒泡过程中的当前DOM元素冒泡前的当前触发事件的DOM对象,等同于this.this和event.target的区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；.this和event.target都是dom对象如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$