• 219 jQuery事件处理: off() 解绑事件,trigger() 、triggerHandler() 自动触发事件


    ​ 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ;

    语法


    演示代码

    <body>
        <div></div>
        <ul>
            <li>我们都是好孩子</li>
            <li>我们都是好孩子</li>
            <li>我们都是好孩子</li>
        </ul>
        <p>我是一个P标签</p>
    	<script>
            $(function() {
      			// 事件绑定
                $("div").on({
                    click: function() {
                        console.log("我点击了");
                    },
                    mouseover: function() {
                        console.log('我鼠标经过了');
                    }
                });
                $("ul").on("click", "li", function() {
                    alert(11);
                });
      
                // 1. 事件解绑 off 
                // $("div").off();  // 这个是解除了div身上的所有事件
                $("div").off("click"); // 这个是解除了div身上的点击事件
                $("ul").off("click", "li");
      
                // 2. one() 但是它只能触发事件一次
                $("p").one("click", function() {
                    alert(11);
                })
            })
        </script>
    </body>
    

    1.2.4 事件处理 trigger() 自动触发事件

    ​ 有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

    语法


    演示代码

    <body>
        <div></div>
        <input type="text">
          
        <script>
        $(function() {
          // 绑定事件
          $("div").on("click", function() {
            alert(11);
          });
    
          // 自动触发事件
          // 1. 元素.事件()
          // $("div").click();会触发元素的默认行为
          
          // 2. 元素.trigger("事件")
          // $("div").trigger("click");会触发元素的默认行为
          $("input").trigger("focus");
          
          // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
          $("input").on("focus", function() {
            $(this).val("你好吗");
          });
          // 一个会获取焦点,一个不会
          $("div").triggerHandler("click");
          // $("input").triggerHandler("focus");
        });
        </script>
    </body>
    
  • 相关阅读:
    C++ Vector
    难点目录
    学习图片展
    使用Github总结
    更改git bash默认的路径
    kubernetes dashboard 搭建参考
    vCenter 6.5 Appliance安装问题汇总
    转-Linux访问Windows FTP服务器中文乱码
    安装升级libpcap至1.9.0
    kubectl patch
  • 原文地址:https://www.cnblogs.com/jianjie/p/12208433.html
Copyright © 2020-2023  润新知