jQuery事件

最新推荐文章于 2020-12-08 14:28:14 发布
最新推荐文章于 2020-12-08 14:28:14 发布
阅读量301 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery事件 jQuery浏览器事件 jQuery鼠标事件 jQuery事件对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42952665/article/details/82659537
版权

一、浏览器事件

（1）.error()

事件 > 浏览器事件 | 弃用 > 1.8 版本弃用的 API | 已删除的函数
.error()
为 JavaScript 的 “error” 事件绑定一个处理函数。

（2）.resize([[data],fn])

事件 > 浏览器事件
为 JavaScript 的 “resize” 事件绑定一个处理函数，或者触发元素上的该事件。

概述
当调整浏览器窗口的大小时，发生 resize 事件。

参数
fn： Function V1.0
在每一个匹配元素的resize事件中绑定的处理函数。

[data],fn String,Function V1.4.3
data: resize([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的resize事件中绑定的处理函数。

（3）.scroll()

事件 > 浏览器事件
为 JavaScript 的 “scroll” 事件绑定一个处理函数，或者触发元素上的该事件。

概述
当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

参数
fn Function V1.0
在每一个匹配元素的scroll事件中绑定的处理函数。

[data],fn String,Function V1.4.3
data: scroll([Data], fn) 可传入data供函数fn处理。

fn: 在每一个匹配元素的scroll事件中绑定的处理函数。

二、文档加载事件

（1）.ready()

概述
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

参数
fn Function V1.0
要在DOM就绪时执行的函数

三、鼠标事件

（1）.click([[data],fn])

为 JavaScript 的”click” 事件绑定一个处理器，或者触发元素上的 “click” 事件。

概述

触发每一个匹配元素的click事件。
这个函数会调用执行绑定到click事件的所有函数。

参数
fn Function V1.0
在每一个匹配元素的click事件中绑定的处理函数。

[data],fn String,Function V1.4.3

  • data: click([Data], fn) 可传入data供函数fn处理。
  • fn: 在每一个匹配元素的click事件中绑定的处理函数。

注意：click事件触发需要以下几点：

鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
这通常要求的顺序,然后才采取行动。如果这些不被满足，mousedown 或 mouseup事件可能更加合适。

（2）.contextmenu()

将事件处理程序绑定到“contextmenu”JavaScript事件，或在元素上触发该事件。

该contextmenu事件被发送到时，点击它的鼠标右键的元素，但在显示上下文菜单之前。如果按下上下文菜单键，则在html元素或当前聚焦的元素上触发事件。任何HTML元素都可以接收此事件。例如，考虑HTML：

（3）dblclick([[data],fn])

为JavaScript 的 “dblclick” 事件绑定一个处理函数，或者触发元素上的 “dblclick” 事件。

（4）.hover()

将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。将一个单独事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

（5）.mousedown()

为 JavaScript 的 “mousedown” 事件绑定一个处理函数，或者触发元素上的该事件。

（6）.mouseenter()

为 mouse enters（鼠标进入） 事件绑定一个处理函数，或者触发元素上的 mouse enters（鼠标进入） 事件。

（7）.mouseleave()

为 mouse leaves（鼠标离开） 事件绑定一个处理函数，或者触发元素上的 mouse leaves（鼠标离开） 事件。

（8）.mousemove()

为 JavaScript 的 “mousemove” 事件绑定一个处理函数，或者触发元素上的该事件。

（9）.mouseout()

为 JavaScript 的 “mouseout” 事件绑定一个处理函数，或者触发元素上的该事件。（注：支持事件冒泡）

（10）.mouseover()

为 JavaScript 的 “mouseover” 事件绑定一个处理函数，或者触发元素上的该事件。（注：支持事件冒泡）

（11）.mouseup()

为 JavaScript 的 “mouseup” 事件绑定一个处理函数，或者触发元素上的该事件。

（12）.toggle()

事件 > 鼠标事件 | 弃用 > 1.8 版本弃用的 API | 已删除的函数

绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。

三、键盘事件

（1）.keydown([[data],fn])

为 “keydown” 事件绑定一个处理函数，或者触发元素上的 “keydown” 事件。

概述

当键盘或按钮被按下时，发生 keydown 事件。

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

参数

fn Function V1.0
在每一个匹配元素的keydown事件中绑定的处理函数。

[data],fn String,Function V1.4.3
data: keydown([Data], fn) 可传入data供函数fn处理。

fn: 在每一个匹配元素的keydown事件中绑定的处理函数。

（2）.keypress([[data],fn])

为 “keypress” 事件绑定一个处理函数，或者触发元素上的 “keypress” 事件。

概述

当键盘或按钮被按下时，发生 keypress 事件。

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

参数

fn： Function V1.0
在每一个匹配元素的keypress事件中绑定的处理函数。

[data],fn： String,Function V1.4.3

  • data: keypress([Data], fn) 可传入data供函数fn处理。
  • fn: 在每一个匹配元素的keypress事件中绑定的处理函数。

（3）.keyup([[data],fn])

为 “keyup” 事件绑定一个处理函数，或者触发元素上的 “keyup” 事件。

概述

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

参数

fn： Function V1.0
在每一个匹配元素的keyup事件中绑定的处理函数。

[data],fn： String,Function V1.4.3

  • data: keypress([Data], fn) 可传入data供函数fn处理。
  • fn: 在每一个匹配元素的keypress事件中绑定的处理函数。

四、表单事件

（1）.blur()

为 “blur” 事件绑定一个处理函数，或者触发元素上的 “blur” 事件（注：此事件不支持冒泡）。

可通过返回false来防止触发浏览器的默认行为。Blur事件会在元素失去焦点时触发，既可以是鼠标行为，也可以是按tab键离开的

（2）.change()

为JavaScript 的 “change” 事件绑定一个处理函数，或者触发元素上的 “change” 事件。

该事件仅适用于文本域(text field)，以及textarea和select元素。当用于select元素时，change事件会在选择某个选项时发生。

（3）.focus()

为 JavaScript 的 “focus” 事件绑定一个处理函数，或者触发元素上的 “focus” 事件。

当元素获得焦点时，触发focus事件

（4）.focusin()

将一个事件函数绑定到”focusin” 事件。

focusin() 事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

（5）.focusout()

将一个事件函数绑定到”focusout” 事件。

focusout() 事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

（6）.select()

为 JavaScript 的 “select” 事件绑定一个处理函数，或者触发元素上的该事件。

当用户选中单行文本框text或多行文本框textarea的文本时会触发select事件。

（7）.submit()

为 JavaScript 的 “submit” 事件绑定一个处理函数，或者触发元素上的该事件。

当提交表单时，会发生submit事件。
Submit()即提交行为

五、事件对象

JQ在事件处理函数中默认传递了event对象，JQ对JS原有的事件对象进行封装，解决了浏览器的兼容性问题，并且创建了一些新的属性和方法，使我们用起来更加方便。
Event对象属性

1. event.type

描述事件的类型

2. event.target

触发该事件的DOM元素
target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。

示例：显示点击元素的标签名。

<!DOCTYPE html>
<html>
<head>
  <style>
    span, strong, p {
      padding: 8px; display: block; border: 1px solid #999;  }
    </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
<script>
    $("body").click(function(event) {
          $("#log").html("clicked: " + event.target.nodeName);
    });  
</script>
</body>
</html>

3. event.currentTarget

  • 在事件冒泡阶段中的当前DOM元素（表示绑定事件的元素），这个属性总是等于函数的this。

注意：如果您使用jQuery.proxy或另一种形式操作作用域，this 将等于您所提供的context（上下文），而不是event.currentTarget

4. event.relatedTarget

  • 返回当鼠标移动时进入或退出的那个 DOM 元素

对于 mouseout 事件，它指向被进入的元素；对于 mouseover 事件，它指向被离开的元素

5. event.data

  • 事件调用时额外数据
  • 当当前正在执行的处理程序绑定时，一个可选的数据对象传递给一个事件方法。

6. event.pageX/event.pageY

  • 显示鼠标相对于文档的左侧和顶部边缘的位置（不包括导航栏的距离）

注意区分：

  • screenX/screen 获取显示器屏幕位置的坐标（包括导航栏的距离）
  • clientX/clientY 获取相对于页面视口的坐标

7. event.result

  • 事件被触发的一个事件处理程序的最后返回值，除非值是 undefined

如果为了DOM元素的同一事件类型绑定了多个事件处理函数，你可以使用result属性获取上一个事件处理函数行的返回值。
此属性当获取自定义事件前一个返回值时非常有用的。

8. event.timeStamp

  • 属性用于返回当前事件触发的时间值 。这个时间值是距离1970年1月1日的毫秒数。（返回一个时间戳）

通过在代码中获得两个点之间的 event.timeStamp 值，并给出差值来分析事件的性能，此属性是很有用的。如果只是要确定当前的时间内的事件处理程序，使用(new Date).getTime()来代替。

注意: 有一个 bug open since 2004, 这个值是不正确填充在Firefox 它是不可能知道事件的时间，在该浏览器中创建。

9. event.which

针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。更多细节请参阅： event.charCode on the MDC.

在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值（相当于event.button）。以下是主要的鼠标按钮映射代码对应表。
Event.which属性值 对应的鼠标按钮

属性值d对应的输入字符
1鼠标左健
2鼠标中健（滚轮键）
3鼠标右健

在 keydown、keyup事件中，event.which属性返回的是对应按键的映射代码值 （相当于event.keyCode）.以下是常用的键盘按键映射代码的对应表。
Which属性值 （或范围） 对应的输入字符

属性值d对应的输入字符
48-57对应字符0-9
65-90对应字符A-Z
97-122对应字符a-z

Which属性值 (或范围) 对应的键盘按键

属性值d对应的输入字符
8Backspace键
9Tab键
13Enter键
16Shift键
17Ctrl键
20Alt键
20Caps Lock键（大小写锁定）
27Esc键
33-36对应按键 PageUp/PageDown/End/Home
37-40对应按键左、上、右、下(方向键)
45-46对应按键Insert、Delete
48-57对应按键0-9（非小键盘）
65-90对应按键A-Z
91Windows键
96-105对应按键0-9（小键盘）
106、107、109、110、111对应按键 * + - . / (小键盘)
112-123对应按键F1-F12

10. event.preventDefault()

  • 阻止事件的默认动作

例如，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了。

11. event.isDefaultPrevented()

  • 根据事件对象中是否调用过 event.preventDefault() 方法,来返回一个布尔值。

12. event.stopPropagation()

  • 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

注意，这不会阻止同一个元素上的其它事件处理函数的运行。

13. event.isPropagationStopped()

  • 根据事件对象中是否调用过 event.stopPropagation() 方法,来返回一个布尔值。
漫漫哒哒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery方法事件大全
10-13
JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全
Jq 事件
cominglately的博客
10-10 1179
转载地址   https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143564690172894383ccd7ab64669b4971f4b03fa342d000 写的非常正点  转载下 因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面
jq事件
weixin_42575793的博客
02-14 158
1.jq事件处理 on() :用于绑定事件; off():事件解绑; trigger()/triggerHandler():事件触发; 1.事件处理on()绑定事件 1.可以绑定多个事件; //绑定多个事件 $('div').on({ mouseenter:function(){ $(this).css('background','skyblue'); }, click:function(...
jq 事件
哈哈绝的博客
12-02 281
jq 事件
深入理解jQuery 事件处理
10-22
下面小编就为大家带来一篇深入理解jQuery 事件处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery事件详解
10-20
本文主要介绍了jQuery事件的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
jQuery 事件 方法
12-13
jQuery 事件 方法 jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。 方法 描述 bind() 向元素添加事件处理程序 blur() 添加/触发...
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
jQuery 事件
12-13
jQuery 事件 jQuery 是为事件处理特别设计的。 什么是事件？ 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例： 在元素上移动鼠标。 选取单选按钮 点击元素 ...
JQ 之 事件
未玄的博客
08-30 218
绑定事件 bind(参数一,参数二,参数三) * 参数一:绑定的事件类型 多个事件名之间用空格间隔 * 参数二:要传递的数据data (将来传递个参数三) * 参数三: 绑定的函数,通过事件对象的data属性可以获取到参数二的值. 解除绑定 $("#btn").off('mouseenter'); $("#btn").unbi...
jq的事件
2197
07-28 171
1).bind(“事件名”,fn)直接绑定在相应的DOM元素上，可以解决跨域问题，但对于动态生成的新元素无法自动获取事件处理函数。 解除绑定：.unbind() $("div").bind("click",function(){ alert("bind 绑定") }) 2).delegate(selector,”事件名”,fn)绑定到父元素方，始终只监听一个，是通过冒泡的方式来绑定到指定...
JQ 事件篇
い南秋乱港
12-08 135
JQ 事件 JQ的事件绑定 jq对象 . 事件名( 回调函数 ) $().click(function(){}); //例： $("#div1").click(function(e){ var even = e || event; console.log("div1的事件触发!", even); }); jq对象 . on() JQ推荐的 绑定事件的方式 $().on() on() 基础绑定事件 语法： $().on(“事件类型”, 回调函数); $("#div1").on
Web前端学习笔记—— jQuery之事件机制、补充、插件
唯恋殊雨的博客
09-25 302
jQuery事件机制 JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。 jQuery事件发展历程(了解) 简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐) 简单事件注册 click(handler) 单击事件 m...
JQ 事件大全（相当全面）
juneoer的博客
03-23 3653
DOM Attribute $("p").addClass(css中定义的样式类型);给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"});给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg");给某个元素添加属性/值 $("img").attr("title", func...
JQ常用事件
RenOuQ的博客
05-18 347
JQ常用事件 jQuery 事件方法语法 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。 页面中指定一个点击事件： $("p").click(); 下一步是定义什么时间触发事件。您可以通过一个事件函数实现： $("p").click(function(){ // 动作触发后执行的代码!! }); 常用的 jQuery 事件方法 $(document).ready() $(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQ
jQ事件及操作大汇总
u011313703的博客
12-21 1446
事件 bind()        为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。 focus()       当元素获得焦点时，发生 focus 事件。 blur( )        当元素失去焦点时发生 blur 事件。 $(document).ready(function(){   $("input").focus(function()
js/jq常用事件
weixin_39703839的博客
12-04 316
复选框显示选中状态 $(&quot;input[type='checkbox']&quot;).attr(&quot;checked&quot;,true).checkboxradio(&quot;refresh&quot;); 单选框选中状态 $(&quot;input[name='log_type']&quot;).get(0).checked=true; $(&quot;input[name='log_type']&q
Javascript&Jquery 常用属性
02-03 500
JScript code  Attribute：$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值，参数是map$(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值$(”img”).at
jquery事件委托
最新发布
12-29
事件委托是利用事件冒泡原理来实现的一种机制，可以通过给父元素添加事件处理程序来管理其子元素的事件。在jQuery中，可以使用`on()`方法来实现事件委托。 下面是一个示例，演示如何使用jQuery事件委托： ```javascript // HTML结构 <div id="parent"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> // jQuery事件委托 $("#parent").on("click", "li", function() { console.log($(this).text()); }); ``` 在上面的示例中，我们给父元素`#parent`添加了一个点击事件处理程序，并指定了子元素`li`作为事件的目标元素。当点击子元素`li`时，事件会冒泡到父元素`#parent`，然后触发事件处理程序，并输出被点击的子元素的文本内容。 通过使用事件委托，我们可以减少事件处理程序的数量，提高性能，并且可以动态地添加或删除子元素而不需要重新绑定事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值