zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    矩阵论基础 3.1初等变换
    最优化理论与方法 9 二次规划
    最优化理论与方法 10 罚函数法
    矩阵论基础 2.5 用Matlab实现矩阵的基本运算
    最优化理论与方法 目录
    UG OPEN API编程基础 12UIStyler对话框
    第十四章 达朗伯原理 1
    矩阵论基础 2.3 方阵的几种运算
    矩阵论基础 3.5 用Matlab求解线性方程组
    测试一下博客的html代码机制
  • 原文地址:https://www.cnblogs.com/jianjie/p/12208433.html
Copyright © 2011-2022 走看看