1、加载文档事件,以前讲过

      在DOM加载完成时运行的代码。

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点

简写如下:

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_02

2、鼠标事件

1、click()单击事件

     当鼠标左键按下,然后再抬起鼠标左键,才算完成一次click事件。

案例1:

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_03

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_04

2、dblclick() 双击事件

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_05

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_04

3、focusin()  获得焦点事件,可作用于父级

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_07

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_08

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_09

    有的人说了,获取焦点的事件,这个div根本就没有获取焦点的事件。因为【获取焦点事件】可以作用于父级。

4、focus()  当元素获得焦点时,触发 focus 事件

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_10

我们发现不行。下面这样才行:

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_11

提示:focusin事件会在元素(或者其内部的任何元素)获得焦点时触发。这跟focus事件的显著区别在于,它可以在父元素上检测子元素获得焦点的情况(换而言之,它支持事件冒泡)。

5、focusout()  失去焦点事件,可作用于父级(略)

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_12

打开页面如下:

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_13

文本框获取焦点效果如下:

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定点击事件形参_14

文本框失去焦点效果如下:

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_13

6、blur() 当元素失去焦点时触发 blur 事件。

     这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_16

7、mousedown鼠标按下事件,只是鼠标左键按下的时候就触发。

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_17

8、mouseup() 鼠标抬起事件

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_18

9、mousemove()  鼠标移动事件

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_19

鼠标在页面上进行滑动的时候,P标签里的值会发生改变:

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_20

10、mouseover()  鼠标滑过事件 和 mouseout()  鼠标滑出事件

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_21

可以连式操作:

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_22

12、mouseenter() 鼠标进入mouseleave() 鼠标离开

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_23

注意:与 mouseover 事件不同。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

区别演示如下:

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_24

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_25

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定点击事件形参_26

现在写jQuery脚本:中mouseover的事件代码:

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_27

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定点击事件形参_28

现在写jQuery脚本:中mouseenter的事件代码:

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_29

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_30

总结:也就是冒泡可以不可以阻止的问题:

mouseover事件:不能阻止冒泡。

mouseenter事件:能阻止冒泡。

mouseover作用于父元素时:当鼠标滑过它本身或是它里面的子元素时都会进行触发,这种情况在专业术语上叫做冒泡。

mouseover作用于子元素时:当鼠标滑过它本身才会进行触发,当鼠标滑过它的父元素时是不会触发的。

mouseenter作用于父元素时:只有鼠标滑过它本身的时候才会进行触发,当鼠标滑过它的子元素时不会触发。

 mouseenter作用于子元素时:只有鼠标滑过它本身的时候才会进行触发,当鼠标滑过它的父元素时不会触发。

老师我记不住,这个没有关系,当你用的时候你注意一下,它有这样一种情况存在,所以,一个好的习惯就是绑定完事件以后记得输入一下,看看事件有没有绑定成功。

13、hover() 同时绑定mouseenter()鼠标进入事件 和mouseleave() 鼠标离开事件

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_31

2、键盘事件

keydown() 键盘按下事件

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_32

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_33

结果不太同步,这是因为,只要键盘上的键子被按下就会被触发keydown(),但是文本框的值改变是键盘上的键子不仅要被按下还要被抬起时,才会改变。

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_34

keyup()  键盘按下并弹起事件:

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_35

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_36

这样就同步了。

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_37

Keypress()  类似于keydown()

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_38

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_33

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_34

注意:由于keypress事件没有统一的官方规范说明,所以在不同的浏览器,不同的浏览器版本,和不同的平台实际使用这个事件时可能遇到问题,不常用,了解一下就可以。

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_41

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_42

3、表单事件

focus() 获取焦点事件

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_43

blur() 失去焦点事件

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_44

也可以链式操作:

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_45

change()  表单值改变事件

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_46

注意:当有focus事件的元素里面的值改变的时候,并且触发了blur事件,才算完成一次change事件。一般配合文件域进行使用。

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_47

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_48

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_49

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_50

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_51

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_52

select()  表单元素里的文本内容被选中时的事件,只能用于input的及个别类型和textarea

案例1:

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_53

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_54

别它类型的input元素,大家可以自行尝试。

案例2:

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_55

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_56

submit()  表单提交事件

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_57

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_58

4、浏览器事件

resize() 浏览器窗口改变大小事件

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_59

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_60

scroll()  浏览器滚动条移动时发生的事件

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_61

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_62

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_63

至此,常用的事件,老师都一一举例为大家进行讲解了。

jQuery事件---事件处理

on()  在选择元素上绑定一个或多个事件的事件处理函数

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定点击事件形参_64

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_65

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_66

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_67

off()  在选择元素上移除一个或多个事件的事件处理函数

off() 方法移除用.on()绑定的事件处理程序。

案例1:移除一个事件处理函数

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_68

单击P标签以后不在输出了:

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_69

案例2:移除多个事件处理函数

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_70

或是:

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_71

现在,不管是单击还是滑过什么都不会进行输出了:

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_72

bind()  为每个匹配元素的特定事件绑定事件处理函数。

案例1:当每个段落被点击的时候,弹出其文本。

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_73

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_74

案例2:同时绑定多个事件类型

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定点击事件形参_75

现在不管是单击还是鼠标滑过都输出内容:

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_76

案例3:同时绑定多个事件类型/处理程序

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_77

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_78

unbind()  bind()的反向操作,从匹配的元素中删除绑定的事件

案例1:把所有段落的所有事件取消绑定

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_79

案例2:将段落的click事件取消绑定

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_80

案例3:

one()  为匹配元素的特定事件绑定一个一次性的事件处理函数

案例1:当所有段落被第一次点击的时候,输出其文本

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_81

不管单击多少次,只会输出一次标签里的内容:

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_82

trigger()  事件,模拟事件发生

案例1:

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_83

单击【单击】以后,弹出对话框。

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_84

案例2:不用单击就可以弹出对话框了

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_85

triggerHandler()  事件,模拟事件发生,能阻止冒泡

案例1:典型的冒泡事件。

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_86

预览效果如下:

jquery绑定onscoll jquery绑定单击事件的方法_获取焦点_87

单击【点击】以后,依次弹出:

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_88

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定点击事件形参_89

案例2:模拟a标签被单击。

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定点击事件形参_90

预览后,只会弹出一个a元素被点击了。

jquery绑定onscoll jquery绑定单击事件的方法_事件处理_91

live()、die()、toggle()事件已经废弃

delegate()  虽然未被废弃,但官方推荐使用on()代替

jquery绑定onscoll jquery绑定单击事件的方法_jquery绑定onscoll_92

预览看效果,单击页面空白处时,生成一个P标签,当单击新增加出来的标签时,也会生成不只一个P标签。

jquery绑定onscoll jquery绑定单击事件的方法_失去焦点_93

undelegate()  虽然未被废弃,但官方推荐使用off代替