jQuery学习笔记——事件处理

1. bind()方法：此方法把指定的事件附加到指定的元素。

bind(eventType, data, handler)

eventType:指定事件类型的字符串，click(单击)、double-click[dblclick](双击)、focus(聚焦)、blur(失焦)等。

data:传递到事件处理函数进行处理的数据。如果省略，事件处理函数可作为第二参数。

   handler:事件处理函数，包含在指定事件发生时要执行的语句。

2. unbind()方法：从指定的元素中删除先前绑定的事件处理函数。

unbind(eventType, handler)

unbind(eventType)

unbind()

eventType引用不用事件类型，如单击、双击等。附加了指定eventType的所有事件处理函数将被停止执行。

Handler是要删除的事件处理函数，应该与传递到bind()方法的事件处理函数相同。

如果不传递任何参数，所有的事件将被删除。

3. trigger()：此方法调用指定事件类型的事件处理函数（事件类型作为参数传递到此方法）。

trigger(eventType)

4. 处理鼠标事件：

mousedown()：鼠标指针在指定的元素上时按下鼠标键。

mousedown(handler)

mousedown()

第一个语法中的handler是发生mousedown事件时执行的函数。

第二个语法是手动调用（触发）mousedown()事件：

$(‘.button1’).click(function() {$(‘.button2’).mousedown();});

mouseup()：鼠标指针在指定的元素上时释放鼠标键。

mouseup(handler)

mouseup()

mouserover()：鼠标进入指定元素的区域，发生mouseover事件。

mouseover(handler)

mouseover()

mouseout()：鼠标离开指定元素的区域，发生mouseout事件。

mouseout(handler)

mouseout()

5.查找鼠标按下时的屏幕坐标：

事件对象有几个特性（attribute）或属性（property）。

screenX:指定事件发生时相对于屏幕原点的横坐标。（event.screenX）

screenY:指定事件发生时相对于屏幕原点的纵坐标。（event.screenY）

6.聚焦和失焦：

focus()：此方法把焦点事件绑定到指定的元素。（获得焦点可以通过指针设备或Tab导航）

focus(handler)

blur()：当指定的元素失去焦点时触发blur事件。

blur(handler)

7.在按钮上应用悬停效果：

Eg:

Css样式：

.hover {cursor:crosshair; color:blue; background-color:cyan}

jQuery：

$(document).ready(function() {$(‘.buttons’).hover(function() {$(this).addClass(‘hover’);},function() {$(this).removeClass(‘hover’);});});

hover()方法把两个事件处理函数附加到指定的元素。一个事件处理函数在鼠标指针进入元素时触发，另一个事件处理函数在鼠标指针离开元素时触发。

hover(handler1, handler2)

8.toggleClass()：如果CSS类已经应用到指定元素，则此方法删除CSS类；如果尚未应用，则为指定元素应用CSS类。

toggleClass(class)

这里的class是在指定的元素上将要应用的CSS类（如果尚未应用），或将要删除的CSS类（如果已经应用）。

toggle()：此方法为指定的元素附加两个事件处理函数。第一个事件处理函数在事件偶数次发生时被执行，而第二个事件处理函数在事件奇数次发生时被执行，从0开始计数。

toggle(handler1, handler2)

9.remove()：从DOM中删除指定的元素集合，并返回JQuery对象。它也删除所有相关的事件处理函数和内部缓存数据。不需要传递任何参数到此方法。

10.动画效果：

fadeIn()方法通过把元素变为不透明而显示选定的元素。

fadeIn(speed, callback)

speed指定动画的持续时间。可以指定speed为预定义的字符串fast、normal、slow或毫秒数。毫秒数越大，动画持续的时间越长。默认速度是normal。

Callback是动画完成时调用的函数。

fadeOut()通过淡出使选定的元素变为不可见。

fadeOut(speed, callback)

11.滑动效果：

slideDown()以滑动效果来逐渐显示选定元素。

slideDown(speed, callback)

slideUp()以滑动效果逐渐使选定元素消失不见。

slideUp(speed, callback)

12.animate()：此方法用于把自定义动画应用到选定的元素。根据指定的CSS属性和使用的缓和参数来控制自定义动画。

animate(properties, speed, easing, callback)

properties是指CSS属性（终值），即该元素在动画完成后达到的值。

easing（缓和）是一个函数（可选），控制动画随着时间如何进行。它需要一个插件。有两个缓和函数：linear（线性）和swing（摆动）。默认值是swing。

fadeTo()：此方法调整选定元素的不透明度。

fadeTo(speed, opacity, callback)

opacity（不透明度）是介于0和1之间的数值，决定了动画完成时的不透明度值。值为0意味着选定元素不可见，1意味着选定元素完全可见，0.5意味着选定元素模糊灰暗。

13.键盘事件：

keypress()：把事件处理函数绑定到指定元素，当用户在键盘上按键时就触发事件。

keypress(handler)

keypress()

这里的handler包含每次某个键盘键被按下时将要执行的语句。

不带参数的keypress()方法用于手动触发按键事件。

【事件对象的keyCode（键码）属性即为按下键的数字代码。javascript的String对象的fromCharCode()方法。】

keydown()：把事件处理函数绑定到指定的元素，一旦用户在键盘上按下某键，就会触发事件处理函数。

keydown(handler)

keydown()

keyup()：把事件处理函数绑定到指定的元素，一旦用户在键盘上释放某键，就会触发事件处理函数。

keyup(handler)

keyup()

【keypress()和keydown()的区别：如果用户反复按任意键，按下然后保持按下状态，keydown()事件只执行一次，而keypress()事件则是每插入一个字符就执行一次（keydown()的持续时间更长一些）。此外，修改键Shift键、Ctrl键等位keydown()所识别，而这些修改键不会触发keypress()事件。】

14.防止事件冒泡：

利用事件的target（目标）属性，控制事件传播，并停止事件冒泡。利用target属性，可以确定哪个DOM元素首先接收到事件，并确定该事件不会自动传播到其亲元素。