jQuery事件总结
开发工具与关键技术:vs JavaScript作者:肖骏平撰写时间:2020年5月3日
Jquery载入事件:
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册的替代方法。通过使用这个方法,
可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
jQuery中的鼠标事件:
- click() 鼠标单击事件
- dblclick() 鼠标双击事件
- mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件
- mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup 事件。
- mouseenter() 当鼠标指针穿过元素时,会发生mouseenter事件。该事件大多数时候会与mouseleave 事件一起使用。
- mouseleave() 当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用
- mouseover() 当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用
- mouseout() 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用
- mousemove() 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
jQuery鼠标事件之hover事件
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
键盘事件:
鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为。
相对应的键盘也有这类事件,将用户行为分解成2个动作,键盘按下与松手,针对这样的2种动作,jQuery分别提供了对应keydown与keyup方法来监听
keydown()事件:当键盘或按钮被按下时,发生keydown事件。
keyup()事件: 当按钮被松开时,发生keyup事件。它发生在当前获得焦点的元素上。
事件的绑定和解绑
on()的多事件绑定
之前的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,
所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个\”on\”方法来实现的。
jQuery on()方法是官方推荐的绑定事件的一个方法。
卸载事件off()方法
通过.on()绑定的事件处理程序
通过off() 方法移除该绑定
根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,
选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除
jQuery中的表单事件
hange()事件
监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。
select()事件
当textarea或文本类型的input元素中的文本被选择时,会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。
可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
submit()事件
提交表单是一个最常见的业务需求,比如用户注册,一些信息的输入都是需要表单的提交。
同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作