1、加载文档事件,以前讲过
在DOM加载完成时运行的代码。
简写如下:
2、鼠标事件
1、click()单击事件
当鼠标左键按下,然后再抬起鼠标左键,才算完成一次click事件。
案例1:
2、dblclick() 双击事件
3、focusin() 获得焦点事件,可作用于父级
有的人说了,获取焦点的事件,这个div根本就没有获取焦点的事件。因为【获取焦点事件】可以作用于父级。
4、focus() 当元素获得焦点时,触发 focus 事件
我们发现不行。下面这样才行:
提示:focusin事件会在元素(或者其内部的任何元素)获得焦点时触发。这跟focus事件的显著区别在于,它可以在父元素上检测子元素获得焦点的情况(换而言之,它支持事件冒泡)。
5、focusout() 失去焦点事件,可作用于父级(略)
打开页面如下:
文本框获取焦点效果如下:
文本框失去焦点效果如下:
6、blur() 当元素失去焦点时触发 blur 事件。
这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
7、mousedown鼠标按下事件,只是鼠标左键按下的时候就触发。
8、mouseup() 鼠标抬起事件
9、mousemove() 鼠标移动事件
鼠标在页面上进行滑动的时候,P标签里的值会发生改变:
10、mouseover() 鼠标滑过事件 和 mouseout() 鼠标滑出事件
可以连式操作:
12、mouseenter() 鼠标进入mouseleave() 鼠标离开
注意:与 mouseover 事件不同。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
区别演示如下:
现在写jQuery脚本:中mouseover的事件代码:
现在写jQuery脚本:中mouseenter的事件代码:
总结:也就是冒泡可以不可以阻止的问题:
mouseover事件:不能阻止冒泡。
mouseenter事件:能阻止冒泡。
mouseover作用于父元素时:当鼠标滑过它本身或是它里面的子元素时都会进行触发,这种情况在专业术语上叫做冒泡。
mouseover作用于子元素时:当鼠标滑过它本身才会进行触发,当鼠标滑过它的父元素时是不会触发的。
mouseenter作用于父元素时:只有鼠标滑过它本身的时候才会进行触发,当鼠标滑过它的子元素时不会触发。
mouseenter作用于子元素时:只有鼠标滑过它本身的时候才会进行触发,当鼠标滑过它的父元素时不会触发。
老师我记不住,这个没有关系,当你用的时候你注意一下,它有这样一种情况存在,所以,一个好的习惯就是绑定完事件以后记得输入一下,看看事件有没有绑定成功。
13、hover() 同时绑定mouseenter()鼠标进入事件 和mouseleave() 鼠标离开事件
2、键盘事件
keydown() 键盘按下事件
结果不太同步,这是因为,只要键盘上的键子被按下就会被触发keydown(),但是文本框的值改变是键盘上的键子不仅要被按下还要被抬起时,才会改变。
keyup() 键盘按下并弹起事件:
这样就同步了。
Keypress() 类似于keydown()
注意:由于keypress事件没有统一的官方规范说明,所以在不同的浏览器,不同的浏览器版本,和不同的平台实际使用这个事件时可能遇到问题,不常用,了解一下就可以。
3、表单事件
focus() 获取焦点事件
blur() 失去焦点事件
也可以链式操作:
change() 表单值改变事件
注意:当有focus事件的元素里面的值改变的时候,并且触发了blur事件,才算完成一次change事件。一般配合文件域进行使用。
select() 表单元素里的文本内容被选中时的事件,只能用于input的及个别类型和textarea
案例1:
别它类型的input元素,大家可以自行尝试。
案例2:
submit() 表单提交事件
4、浏览器事件
resize() 浏览器窗口改变大小事件
scroll() 浏览器滚动条移动时发生的事件
至此,常用的事件,老师都一一举例为大家进行讲解了。
jQuery事件---事件处理
on() 在选择元素上绑定一个或多个事件的事件处理函数
off() 在选择元素上移除一个或多个事件的事件处理函数
off() 方法移除用.on()绑定的事件处理程序。
案例1:移除一个事件处理函数
单击P标签以后不在输出了:
案例2:移除多个事件处理函数
或是:
现在,不管是单击还是滑过什么都不会进行输出了:
bind() 为每个匹配元素的特定事件绑定事件处理函数。
案例1:当每个段落被点击的时候,弹出其文本。
案例2:同时绑定多个事件类型
现在不管是单击还是鼠标滑过都输出内容:
案例3:同时绑定多个事件类型/处理程序
unbind() bind()的反向操作,从匹配的元素中删除绑定的事件
案例1:把所有段落的所有事件取消绑定
案例2:将段落的click事件取消绑定
案例3:
one() 为匹配元素的特定事件绑定一个一次性的事件处理函数
案例1:当所有段落被第一次点击的时候,输出其文本
不管单击多少次,只会输出一次标签里的内容:
trigger() 事件,模拟事件发生
案例1:
单击【单击】以后,弹出对话框。
案例2:不用单击就可以弹出对话框了
triggerHandler() 事件,模拟事件发生,能阻止冒泡
案例1:典型的冒泡事件。
预览效果如下:
单击【点击】以后,依次弹出:
案例2:模拟a标签被单击。
预览后,只会弹出一个a元素被点击了。
live()、die()、toggle()事件已经废弃
delegate() 虽然未被废弃,但官方推荐使用on()代替
预览看效果,单击页面空白处时,生成一个P标签,当单击新增加出来的标签时,也会生成不只一个P标签。