知识点:
1、
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
页
面
载
入
事
件
可
以
在
同
一
个
页
面
中
无
限
次
地
使
用
(document).ready(function(){})页面载入事件 可以在同一个页面中无限次地使用
(document).ready(function())页面载入事件可以在同一个页面中无限次地使用(document).ready()事件。
其中注册的函数会按照(代码中的)先后顺序依次执行。
参数说明:fn 要在DOM就绪时执行的函数
2.1、jQuery鼠标事件
-
click() 鼠标单击事件 // js onclick
- dblclick() 鼠标双击事件 // js ondblclick
- dblclick() 鼠标双击事件 // js ondblclick
-
mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件
-
mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup 事件。
-
mouseenter() 当鼠标指针穿过元素时,会发生mouseenter事件。该事件大多数时候会与mouseleave 事件一起使用。
-
mouseleave() 当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用
7.mouseover() 当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用
8.mouseout() 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用
- mousemove() 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标
注意!!!
mouseover与mouseenter的区别:
mouseover如果鼠标指针穿过选定元素的任何子元素,都会触发mouseover事件,
mouseenter如果鼠标指针穿过选定元素的任何子元素不会触发mouseenter事件
mouseout与mouseleave的区别:
mouseout不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件。
mouseleave只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
简而言之:就是移动到选定元素的子元素上面是否触发事件
mouseover 子元素 触发
mouseenter 子元素 不触发
mouseout 子元素 触发
mouseleave 子元素 不触发
2.2、jQuery鼠标事件–hover事件
hover([over,]out)
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
参数说明:
over,out:
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
out:当鼠标移到元素上或移出元素时触发执行的事件函数
2.3、jQuery鼠标事件–focus()获取焦点事件与blur()失去焦点事件
1. focus() 事件:当元素获得焦点时,触发focus事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数
- blur() 事件:当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
2.4、jQuery鼠标事件–focusin()事件与focusout()事件
1. focusin() 事件:当元素获得焦点时,触发 focusin 事件。focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
2. focusout() 事件:当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况
3.1、jQuery表单事件-- change()事件
input元素:监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。
select元素:对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发
textarea元素:多行文本输入框,当有改变时,失去焦点后触发change事件
3.2、jQuery表单事件–select()事件
当textarea或文本类型的input元素中的文本被选择时,会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。
可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
3.3、jQuery表单事件–submit()事件:验证表单输入的正确性,如果错误就阻止提交,从新输入可以通过submit事件,监听下提交表单的这个动作。
4.1、jQuery键盘事件–keydown()与keyup()事件
鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为。
相对应的键盘也有这类事件,将用户行为分解成2个动作,键盘按下与松手,针对这样的2种动作,jQuery分别提供了对应keydown与keyup方法来监听
-
keydown()事件:当键盘或按钮被按下时,发生keydown事件。
-
keyup()事件:当按钮被松开时,发生keyup事件。它发生在当前获得焦点的元素上
4.2、jQuery键盘事件–keypress()事件
keypress事件与keydown和keyup的主要区别
只能捕获单个字符,不能捕获组合键
无法响应系统功能键(如delete,backspace)
不区分小键盘和主键盘的数字字符
总而言之, KeyPress主要用来接收字母、数字等ANSI字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。
诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。
5、事件的绑定和解绑 on()的多事件绑定
最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on(‘click’,function(){}) //on方式
最大的不同点就是on是可以自定义事件名,当然不仅仅只是这些
多个事件绑定同一个函数
$("#elem").on(“mouseover mouseout”,function(){ });
通过空格分离,传递不同的事件名,可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
});
6、卸载事件off()方法
通过.on()绑定的事件处理程序
通过off() 方法移除该绑定
根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除
绑定2个事件
$(“elem”).on(“mousedown mouseup”,fn)
删除一个事件
$(“elem”).off(“mousedown”)
删除所有事件
$(“elem”).off(“mousedown mouseup”)
快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
$(“elem”).off();
演示时取消注释
$("#div2").off(“mousedown”);
$("#div3").off();