多事件绑定和解绑

最新推荐文章于 2023-09-08 09:03:57 发布

ldxq

最新推荐文章于 2023-09-08 09:03:57 发布

阅读量468

点赞数

本文链接：https://blog.csdn.net/weixin_44540993/article/details/95028469

版权

-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：vs· jQuery基础
作者： xqll
撰写时间：2019/7/5
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面，我来演示一下如何多事件绑定和解绑
分别是使用 on()的多事件绑定
和off（）方法卸载
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on(‘click’,function(){}) //on方式
我上代码演示一下如何绑定多个事件
先给他们设置一些样式

<style>
          div {
            width:400px;
            height:100px;
            margin:20px auto;
            border:1px solid #ccc;
            background:#91aaee;
            font-size:20px;
            text-align:center;
            line-height:100px;
            color:#fff;
        }
    </style>

<body>
<div id="div1"> </div>
    <div id="div2"> </div>
</body>

然后就是写它的方法

<script>
        $("#div1").on({
            mouseover:function(e)
            {
                $(this).text("移入" + e.type);
            },  
            mouseout:function(e)
            {
                $(this).text("移出" + e.type);
            },
            click: function (e)
            {
                $(this).text("点击" + e.type);
            }
        });
</script>

写方法的话要引入js插件
//e为事件对象事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
我鼠标移入或者移出或点击的时候它样式里面就会出现我设置的字体和它的方法名称
就像这样
在这里插入图片描述
上面这个方法是多个事件绑定不同函数的方法
接下来是演示多个事件绑定同一个函数
代码

  $("#div2").on("mouseover mouseout click", function (e) {
            $(this).text("触发事件：" + e.type);
   });

它得到的结果是跟上面是一样的
然后就是卸载事件
通过off() 方法移除该绑定
根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除
就比如
$("#div2").off(“mouseout”);
它的意思是卸载了 id为div2中的鼠标移出事件
Off（）不带参数的话就是移除它所有事件的意思
就比如
$("#div1").off("");
然后
Id为div1的样式里面之前设置的事件就都没有了
在这里插入图片描述