jQuery基础修炼圣典—事件篇

click与dbclick事件
jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。

mousedown与mouseup事件
另外需要注意的是:

click与mousedown的区别:

click事件其实是由mousedown于mouseup 2个动作构成,所以点击的动作只有在松手后才触发

mousemove事件
mousemove事件是当鼠标指针移动时触发的,即使是一个像素

mouseover与mouseout事件
jQuery当中同样提供了这样的事件来监听用户的移入移出操作,mouseover()与mouseout()事件

mouseenter与mouseleave事件
jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作

hover事件
只需要在hover方法中传递2个回调函数就可以了,不需要显示的绑定2个事件

$(selector).hover(handlerIn, handlerOut)

handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数

focusin事件
当一个元素,或者其内部任何一个元素获得焦点的时候,例如:input元素,用户在点击聚焦的时候,如果开发者需要捕获这个动作的时候,jQuery提供了一个focusin事件

focusout事件
当一个元素,或者其内部任何一个元素失去焦点的时候,比如input元素,用户在点击失去焦的时候,如果开发者需要捕获这个动作,jQuery提供了一个focusout事件

blur与foucus事件
它们之间的本质区别:

是否支持冒泡处理
举个简单的例子

<div>
  <input type="text" />
</div>

其中input元素可以触发focus()事件

div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了focusin()事件。

focus()在元素本身产生,focusin()在元素包含的元素中产生

change事件

<input>元素,<textarea><select>元素都是可以选择值一些改变,开发者可以通过change事件去监听这些改变的动作

select事件
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

select事件只能用于<input>元素与<textarea>元素

submit事件
验证表单输入的正确性,如果错误就阻止提交,重新输入

keydown()与keyup()事件
将用户行为分解成2个动作,键盘按下与松手

keypress()事件
keypress事件与keydown和keyup的主要区别

对中文输入法支持不好,无法响应中文输入
无法响应系统功能键(如delete,backspace)
由于前面两个限制,keyCode与keydown和keyup不是很一致
总而言之,

KeyPress主要用来接收字母、数字等ANSI字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键

on()的多事件绑定
(1)最常见的给元素绑定一个点击事件,对比下一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

最大的不同点就是on是可以自定义事件名,当然不仅仅只是如何,继续往下看

(2)多个事件绑定同一个函数

$(“#elem”).on(“mouseover mouseout”,function(){ });
通过空格分离,传递不同的事件名,可以同时绑定多个事件

(3)多个事件绑定不同函数

$(“#elem”).on({
mouseover:function(){},
mouseout:function(){},
});

卸载事件off()方法
(1)删除一个事件
$(“elem”).off(“mousedown”)

(2)删除所有事件
$(“elem”).off(“mousedown mouseup”)

(3)快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
$(“elem”).off()

trigger事件
$(‘#elem’).trigger(‘click’);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值