jQuery事件绑定与解绑

最新推荐文章于 2022-08-08 20:48:34 发布
最新推荐文章于 2022-08-08 20:48:34 发布
阅读量1.7k 收藏 8
点赞数 13
分类专栏： JavaScript jQuery DOM 文章标签： html5 jquery javascript ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58131487/article/details/121604322
版权

今天是一期关于事件的相关概述！！

一、jQuery 事件注册

二、jQuery 事件处理

1、事件处理 on() 绑定事件

2、事件处理 off() 解绑事件

3、事件处理 trigger() 自动触发事件

三、今日总结

一、jQuery 事件注册

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

  • 优点: 操作简单，且不用担心事件覆盖等问题。

  • 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

 演示代码 ：

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

二、jQuery 事件处理

因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

  • on(): 用于事件绑定，目前最好用的事件绑定方法

  • off(): 事件解绑

  • trigger() / triggerHandler(): 事件触发

1、事件处理 on() 绑定事件

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()<

最低0.47元/天 解锁文章
靠技术吃饭
关注
  • 13
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 24
    评论
专栏目录
jQuery事件多次绑定与解绑问题实例分析
10-17
如果使用`.off("click")`或`.unbind("click")`，则会解绑所有通过jQuery绑定的`click`事件处理函数，但HTML属性`onclick`设置的`add1`仍然会执行。 总结： - jQuery允许同一元素的同一事件被多次绑定，每次绑定的...
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
主要介绍了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用,结合实例形式较为详细的分析了jQuery事件绑定、解绑、事件冒泡、阻止冒泡等相关原理与应用技巧,需要的朋友可以参考下
jQuery基础----绑定和解绑事件的方法
u011863822的博客
07-28 1116
就是简单的聊了一些绑定事件的方法，通过事件绑定，以及通过on方法可以绑定多个方法。同时还聊了解绑事件，以及绑定一次事件的方法one方法。
jQuery--解除事件绑定
吴声子夜歌的博客
10-02 3055
解除事件绑定 在元素绑定事件之后，当在某个时刻不再需要该事件处理时，可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法，分别用于解除由bind()和delegate()方法所绑定的事件，通过参数指明需要解除的绑定事件即可。当方法没有提供参数时，表示解除该元素所有的事件绑定。 在jQuery1.7+中提供了off()方法，用于解除由on()、bind()和de...
03-jQuery事件绑定和解绑
CapejasmineY的博客
08-08 468
jQuery事件绑定和解绑，tragger事件触发
jQuery 3
weixin_43003949的博客
05-06 292
jQuery 尺寸、位置操作 jQuery 尺寸操作 <body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("di...
jQuery事件处理器的绑定及解除方法
weixin_33743880的博客
08-12 82
　　前几天用bind()方法做事件绑定的时候发现还有其他几种事件绑定的方法，查阅了之后对比总结一下。内容详情请点链接~欢迎讨论拍砖~ .bind() 　　.bind(eventType [, eventData], handler) v1.0 　　给被选元素绑定一个事件处理程序。eventType为事件类型如"click","submit","mousedown"等; event...
jquery事件绑定解绑机制源码解析
10-21
在解绑过程中，如果未指定具体的事件处理函数，那么所有与事件类型相关的处理函数都会被解绑。总结JQuery的事件绑定和解绑机制是其强大功能的核心部分。通过深入理解这一机制，我们可以更好地利用JQuery来构建交互...
jQuery事件之解绑事件
weixin_34409822的博客
08-23 89
语法： $(selector).unbind([eventType][,handler(eventObject)]); 返回值：jQuery 参数解释： eventTypey:类型:String以后包含javaScript事件类型的字符串， 比如click或submit handler(eventObject): 类型：function() 如果把在bind时传递的处理函数作为第二个参数，则只...
jQuery绑定和解绑点击事件及重复绑定解决办法
说：/~不了的专栏
10-14 9947
绑点击事件这个是jquery一个常用的功能，如click,unbind等等这些事件绑定事情，但还有很多朋友不知道，下面我来给大家介绍jQuery绑定和解绑点击事件及重复绑定解决办法,有需要了解的同学可参考。
jQuery 事件解绑、事件触发
weixin_45060872的博客
07-04 201
jQuery的事件jQuery的事件事件解绑事件触发 jQuery的事件 jQuery的事件发展历程 原生的js给元素注册多个同名事件 那么后面的会覆盖掉前面 jQuery给元素注册点击事件 可以注册多个，jQuery注册事件 是对原生js注册事件的一个加强 1.事件简单注册 不能同时注册事件 而且不能动态注册事件 $("div").click(function(){ console.log("我是点击事件"); }) $("div").mouseenter(function(){ co
原生 绑定和解除绑定事件 & jquery事件重复绑定解决办法
Provenr的博客
03-06 999
原生 绑定和解除绑定事件 参考链接 https://www.cnblogs.com/jsdarkhorse/archive/2012/09/19/2693191.html // 事件绑定 this.bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 ...
jquery 添加、取消、修改绑定事件
人有匪气，代码才能飞起
03-01 3262
1、使用 $('#id').attr('onclick','xxx')修改绑定事件，那么firebug虽然显示属性修改过来了，但是实际上触发的还是老方法 2、如果元素$('#id')本来就含有一个onclick方法，使用$('#id').live('onclick',functionA) 修改绑定方法，那么实际上触发时候，新老方法都会调用。 必须先解除绑定，当然可以直接
jq动态绑定点击事件
热门推荐
前端小狮的博客
07-13 1万+
jq动态添加的元素需要添加点击事件 可用delegate on添加 1.delegate &amp;lt;div id=&quot;box&quot;&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;button type=&quot;button&quot; id=&quot;addbtn&quot;&amp;gt;添加&amp;lt;/button&amp
jQuery中为元素绑定事件和解绑事件的方式
小鱼儿~同学
08-28 1165
为元素绑定事件的四种方式： 1.  对象.事件名字(事件处理函数)；      eg：$("#btn").click(function(){}); 2. 对象.bind("事件名字",事件处理函数)；      eg:  $("#btn").bind("click",function(){}); 3. 对象.delegate("选择器","事件名字",事件处理函数);    
jQuery的事件绑定与解绑
qq_44127968的博客
07-19 203
jQuery的事件绑定与解绑 一、对象属性绑定 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.js" type="text/javascrip...
jq,jquery监听事件的6种方式和解绑的用法,贼详细
猪猪免费为你分享
01-19 2142
jq是怎么监听事件,事件监听用法大全 参考下面这篇文章,总结真的很详细,特意收藏,以便后续阅读 点击此处=>http://www.shagua.wiki/project/2?p=12
jquery事件与动画的思维导图
最新发布
07-15
抱歉，我无法为您提供直接的思维导图。但是，我可以为您提供一个简单的文字概述来帮助您理解 jQuery 的事件处理和动画效果。 事件处理的思维导图： 1. 选择元素： - 使用选择器来选择要绑定事件的元素。 - 使用`$()`函数或`jQuery()`函数来选择元素。 2. 绑定事件： - 使用`.on()`方法来绑定事件处理函数。 - 指定事件类型（如`click`、`mouseover`等）和要执行的处理函数。 3. 事件处理函数： - 在绑定的事件处理函数中编写要执行的操作。 - 可以访问事件对象（event object）来获取关于事件的信息。 - 使用`$(this)`来引用当前触发事件的元素。 4. 解绑事件： - 使用`.off()`方法来解绑事件处理函数。 - 指定要解绑的事件类型和要解绑的处理函数。 动画效果的思维导图： 1. 选择元素： - 使用选择器来选择要添加动画效果的元素。 - 使用`$()`函数或`jQuery()`函数来选择元素。 2. 添加动画效果： - 使用`.animate()`方法来添加动画效果。 - 指定要修改的 CSS 属性和动画的持续时间。 - 可以使用回调函数来在动画完成后执行其他操作。 3. 预定义动画效果： - 使用`.show()`、`.hide()`和`.toggle()`方法来显示、隐藏或切换元素的可见性。 - 使用`.fadeIn()`、`.fadeOut()`和`.fadeToggle()`方法来淡入、淡出或切换元素的透明度。 - 使用`.slideDown()`、`.slideUp()`和`.slideToggle()`方法来展开、折叠或切换元素的高度。 4. 自定义动画效果： - 使用`.animate()`方法来自定义动画效果。 - 可以指定多个 CSS 属性和动画选项（如缓动效果、队列等）。 这只是 jQuery 的事件处理和动画效果的一些常用方法和思路的概述，还有更多功能和细节可以在 jQuery 的官方文档中找到。希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值