jQuery事件

作者 : 开心源码 本文共1916个字,预计阅读时间需要5分钟 发布时间: 2022-05-13 共232人阅读

今日主打? jQuery事件

事件类型

1.鼠标事件

? ? ? ?click([[data],fn])? ? ? ? ? 单击时触发

? ? ? dbclick([[data],fn])? ? ? ?双击时触发

? ? ? mousedown()? ? ? ? ? ? ?鼠标按下时触发

? ? ? mouseup()? ? ? ? ? ? ? ? ?按下的鼠标松开时触发

? ? ? mouseenter()? ? ? ? ? ? ?鼠标进入时触发

? ? ? mouseleave()? ? ? ? ? ? ?鼠标移出时触发

常用的是上面的

? ? ? hover([over,]out)? ? ? ? ?鼠标在进入和退出时触发两个函数,相当于mouseenter加上mouseleave

? ? ? mouseover? ? ? ? ? ? ? ? ? 鼠标在进入指定元素及其子元素时触发

? ? ? mouseout? ? ? ? ? ? ? ? ? ? 鼠标在移出指定元素及其子元素时触发

? ? ? mousemove([[data],fn]) 鼠标在DOM内部移动时触发

? ? ? scroll([[data],fn])? ? ? ? ?当滚动指定的元素时,会发生scroll事件(scroll触发时不肯定用滚轮去触发)

? 2.键盘事件

? ? ? keydown([[data],fn])? ?当键盘或者按钮被按下时发生keydown事件

? ? ? keyup([[data],fn])? ? ? ? 当键盘或者按钮被松开时发生keyup事件.它发生在当前取得焦点的元素上

? ? ? keypress([[data],fn])? ?当键盘或者按钮被按下时发生keypress事件

PS:keydown 与 keypress 的区别:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? keypress必需是输入内容时才会触发。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? keydown可以记录所有的按键

val()方法返回或者者设置被选元素的值,获取输入框中的内容可以使用val()

例子:

<body>

<input type=”text” value=””>

<p></p>

<script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.js”></script>

?<script>

$(document).ready(function(){

/*

? ? ? $(‘input’).keydown(function(){

? ? ? ? ? ? $(‘p’).text($(this).val());

? ? ? });

? ? ? */

? ? ? $(‘input’).keyup(function(){

????????????$(‘p’).text($(this).val());

? ? ? });

});

</script>

</body>

? 3.其余事件

? ? ? ready(fn)? ? ? ? ? ? ? ? ? ?当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

? ? ? focus([[data],fn])? ? ? ? 当元素取得焦点时触发focus事件

? ? ? blur([[data],fn])? ? ? ? ? ?当元素失去焦点时触发blur事件

? ? ? resize([[data],fn])? ? ? ? 当调整浏览器窗口的大小时,发生resize事件,浏览器窗口其对象是window

? ? ? change([[data],fn])? ? ? ?当元素的值发生改变时,会发生change事件

? ? ? select([[data],fn])? ? ? ? ? 当textarea或者文本类型的input元素中的文本被选择时,会发生select事件(需要我们去选中的才能用select事件)

? ? ? submit([[data],fn])? ? ? ? ?当提交表单时,会发生submit事件

? 4.事件参数———–?event

? ? ? 有些事件,如mousemove和keypress,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。

? ? ? 所有事件都会传入event对象作为参数,可以从event对象上获取到更多的信息。

? 5.事件绑定与取消

? ? on(events,[selector],[data],fn)? ? ?在选择元素上绑定一个或者多个事件的事件解决函数。

? ? off(events,[selector],,fn)? ? ? ? ? ? ? 在选择元素上移除一个或者多个事件的事件解决函数。

? ? one(type,[data],fn)? ? ? 为每一个匹配元素的特定事件(比方click)绑定一个一次性的事件解决函数。

? ? ? ? ? ? ? ?这两天的干货,小伙伴们觉得枯燥么?若需要举例,请下方留言哦

? ? ? ? ? ? ? 前几篇内容,每一篇由于太详细,讲不了几个点,所以这两天就多备了些。

?? good? ?night? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 我虽是个喵星人,但从没养过

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » jQuery事件

发表回复