jQuery的事件绑定与解绑

最新推荐文章于 2022-08-08 20:48:34 发布
最新推荐文章于 2022-08-08 20:48:34 发布
阅读量224 收藏 1
点赞数
分类专栏： jQuery 文章标签： jquery jQuery事件绑定与解绑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44127968/article/details/96499035
版权

jQuery的事件绑定与解绑

一、对象属性绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                alert(1);
            })

            $("#btn").mouseover(function () {
                alert(2);
            })
        })
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
</body>
</html>

二、对象属性链式绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                alert(1);
            }).mouseover(function () {
                alert(2);
            })
        })
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
</body>
</html>

三、对象on函数绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").on("click",function () {
                alert(1);
            })

            $("#btn").on("mouseover",function () {
                alert(2);
            })
        })
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
</body>
</html>

四、对象on函数链式绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").on("click",function () {
                alert(1);
            }).on("mouseover",function () {
                alert(2);
            })
        })
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
</body>
</html>

五、on函数多个事件绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").on({
                "click":function () {
                    alert(1);
                },
                "mouseover":function () {
                    alert(2);
                }
            });
        })
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
</body>
</html>

六、单个事件解绑

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").on({
                "click":function () {
                    alert(1);
                },
                "mouseover":function () {
                    alert(2);
                }
            });


            $("#btn2").on("click",function () {
                $("#btn1").off("click");
            })
        })
    </script>
</head>
<body>
<input id="btn1" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

七、多个事件解绑

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").on({
                "click":function () {
                    alert(1);
                },
                "mouseover":function () {
                    alert(2);
                }
            });


            $("#btn2").on("click",function () {
                $("#btn1").off("click mouseover");
            })
        })
    </script>
</head>
<body>
<input id="btn1" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

八、所有事件解绑

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").on({
                "click":function () {
                    alert(1);
                },
                "mouseover":function () {
                    alert(2);
                }
            });


            $("#btn2").on("click",function () {
                $("#btn1").off();
            })
        })
    </script>
</head>
<body>
<input id="btn1" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

九、鼠标事件切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#myDiv").hover(function () {
                $(this).css("background-color", "green");
            },function () {
                $(this).css("background-color", "red");
            })
        })
    </script>
</head>
<body>
    <div id="myDiv" style="width:300px;height:300px;background:red">
        鼠标移入变成绿色，移出回复红色
    </div>
</body>
</html>

十、点击事件切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#myDiv").toggle(function () {
                $(this).css("background-color", "green");
            },function () {
                $(this).css("background-color", "red");
            },function () {
                $(this).css("background-color", "orange");
            },function () {
                $(this).css("background-color", "blue");
            })
        })
    </script>
</head>
<body>
    <div id="myDiv" style="width:300px;height:300px;background:red">
        鼠标移入变成绿色，移出回复红色
    </div>
</body>
</html>
csdn_wuhg
关注
专栏目录
JQuery（三） -- JQuery对象事件的绑定与解绑
PUYALEI的博客
05-10 133
【代码】JQuery（三） -- JQuery对象事件的绑定与解绑。
jQuery事件绑定与解绑
原地起飞
12-10 1847
今天是一期关于事件的相关概述！！ 一、jQuery 事件注册 二、jQuery 事件处理 1、事件处理 on() 绑定事件 2、事件处理 off() 解绑事件 3、事件处理 trigger() 自动触发事件 一、jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 演示代码 ： &lt.
jQuery事件的绑定与解绑
jwz934738949的博客
08-31 317
事件绑定 在jQuery中对事件的绑定有两种方式，一种方式是使用eventName，另一种方式是使用on eventName方式只传入一个参数，该参数为一个函数，在函数内部进行具体的操作；而on方式要传入两个参数，第一个参数为字符串类型，输入要绑定的事件名称，第二个参数为函数，进行具体的操作 使用jQuery的事件绑定时，可以使用上述两种方式，这两种方式能够对多个事件进行绑定，也可以对同一个事件进行多次绑定。并且后绑定的事件不会覆盖之前绑定的事件，而是会同时绑定，同时生效 对于jQuery中给出的事件，可
jQuery事件绑定和解绑
yuanmomoya的博客
08-29 185
就是当操作发生时，做出的相应处理，对于网页来说，操作无非式鼠标和键盘给的，对应的事件包括单击、双击、鼠标经过等等，我们要对相应的操作绑定事件 /* 通过jquery绑定事件 */         //1、通过事件类型绑定事件         //2、通过bind("type1 type2 type3..." , function(){//事件处理函数})方法绑定多个事件(相反的多个操作)   ...
jQuery事件绑定与解绑的方式
YYxiaobao0726的博客
03-05 307
jQuery绑定事件的方式很简单，有两种。其优异点都在下面的注释中做好了，请看下面的代码吧。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;
jquery绑定与解绑事件
zhangliao613的专栏
02-19 8193
解绑事件   $("#freightname").unbind("click");//高版本jquery才可用   $("#freightname").attr("onclick","");   绑定事件 $("#freightname").live("click",function(){alert("aaa");}); 或者 $("#freightname").live("clic
深入解析jQuery事件绑定与解绑的底层机制
在jQuery库中，事件绑定和解绑机制是其强大功能的重要组成部分。本文档深入解析了这一核心概念，主要讲解了以下几个关键点： 1. **事件绑定基础**: jQuery允许用户通过`.on()`方法为元素绑定点击（click）、鼠标...
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
综上所述，jQuery事件处理机制中的绑定和解绑、事件冒泡与阻止事件冒泡是前端开发中非常重要的知识点。在实际开发过程中，灵活运用这些技术可以实现更加丰富的交互效果，并提升用户体验。通过上述实例的介绍和分析，...
jQuery事件注册及处理
weixin_45785652的博客
06-05 309
jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 语法 演示代码 <body> <div></div> <script> $(function() { // 1. 单个事件注册 $("div").click(function(
jQuery笔记（事件绑定和解绑）
LX522570的博客
09-16 224
事件绑定一、bind()1.传两参数 第一个参数是事件名，第二个是事件处理函数2.传键值对(对象) <body> <input type="button" value="点我" id="btn"> </body> $("#btn").bind("click",function () { alert("我不要你觉得，...
jQuery事件绑定与解除绑定实现方法
10-24
主要介绍了jQuery事件绑定与解除绑定实现方法,实例分析了jQuery中bind与unbind方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery中为元素绑定事件和解绑事件的方式
小鱼儿~同学
08-28 1199
为元素绑定事件的四种方式： 1.  对象.事件名字(事件处理函数)；      eg：$("#btn").click(function(){}); 2. 对象.bind("事件名字",事件处理函数)；      eg:  $("#btn").bind("click",function(){}); 3. 对象.delegate("选择器","事件名字",事件处理函数);    
jquery里面的绑定与解除绑定事件
weixin_45021446的博客
08-18 177
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div, .div1{ width: 300px; height: 300px; background-color:
jquery事件绑定和解绑
水巷石子的博客
09-18 3254
jquery事件绑定和解绑 事件的绑定和解绑 ​ <input id="btnId" type="button" onclick="clickFn()" value="点我,弹框"/> 方式1：在标签中写死 function clickFn(){} 方式2：在程序中动态绑定，但是不能解绑 $("#btnId").click(function(){}); 方式3：在程序中动态绑定，可以解绑 $("#btnId").on(“click”,function(){});
简单几步看懂JQ事件绑定与解绑
Hemx的博客
05-22 328
事件绑定 eventName(function(){}) 绑定对应事件名的监听, 例如：$('#div').click(function(){}); on(eventName, funcion(){}) 通用的绑定事件监听, 例如：$('#div').on('click', function(){}) 优缺点 eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持 on: 编码不方便, 可以添加多个监听, 且更通用 事件解绑 off(eventName) 对某个元素的事
Jquery某个具体事件绑定和解绑
dieang2090的博客
11-02 149
代码如下： $(window).on('resize.namespace scroll.namespace', function(infoBindFun) { if(oneTimeflag){ oneTimeflag=false; setIn...
jQuery中的事件
球球之家
02-01 826
* jQuery中的事件：特殊的事件         * ready()方法：和window.onload         * ready()和onload的区别：面试             * 执行时机             * 编写个数             * 简写方法         * 绑定事件和解绑事件：bind()和unbind()         * hover
jQuery事件处理及事件解绑
DangR_Jisoo的博客
12-05 158
jQuery事件处理及事件解绑 绑定单个事件 div{ width: 200px; height: 200px; background-color: teal; } <div></div> //方法1 $(function() { $('div').click(function() { ale
03-jQuery事件绑定和解绑
CapejasmineY的博客
08-08 527
jQuery事件绑定和解绑，tragger事件触发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值