• jquery 事件的绑定,触发和解绑


    js和jquery绑定的区别?

      HTML或原生js是单一对应绑定的,绑多了只留最后一个。jQuery是追加绑定的,绑多少执行多少。这个在每一本jQuery的书中都是首先提到的事情。

    jquery绑定与解绑

      1. on()  推荐

    <div class="outter">
        <input class="btn0" type="button" />
    </div>
    // 绑定
    $(".outter").on("click", ".btn0", function() { alert("click btn0 by .on"); });

    // 解绑
    $(".outter").off("click");

    on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

    使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

    如需移除事件处理程序,请使用 off() 方法。

    off() 方法通常用于移除通过 on() 方法添加的事件处理程序。自 jQuery 版本 1.7 起,off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。

    如需添加只运行一次的事件然后移除,请使用 one() 方法。

      2.bind()

    // 绑定
    $(".btn0").bind("click", function() { alert("click btn0 by .bind"); });

    // 解绑
    $(".btn0").unbind("click");
    // 或者
    $(".btn0").unbind();

    bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。

      简写形式:

    $(".btn0").click(function() {
        alert("click btn0 by .click");
    });

      3.live()

    // 绑定
    $(".btn0").live("click", function() { alert("click btn0 by .live"); });

    // 解绑
    $(".btn0").die();

    live() 方法为被选元素添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

      4.delegate()

    // 绑定
    $(".outter").delegate(".btn0", "click", function() { alert("click btn0 by .delegate"); });

    // 解绑
    $(".outter").undelegate();

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    jquery触发事件

    $(".btn0").trigger("click");

     trigger() 方法触发被选元素的指定事件类型。

  • 相关阅读:
    PhoenixFD插件流体模拟——UI布局【Dynamics】详解
    Altera三速以太网IP核使用(下篇)之千兆网接口设计与使用
    FPGA之千兆网接口设计与使用(不调用IP核,适用于Alter与Xilinx,简单粗暴实现udp协议封装)
    基于Matlab Hdl Coder实现FPGA程序开发(卡尔曼滤波算法实现)
    FPGA之SSI接口协议实现
    FPGA之BISS接口协议实现
    Xilinx DDR2 IP核使用
    FFT IP核调用与仿真之SCALE压缩因子设置
    Quartus/Modelsim调试仿真技巧
    FPGA之CORDIC算法实现_代码实现(下)
  • 原文地址:https://www.cnblogs.com/ooo0/p/7743023.html
Copyright © 2020-2023  润新知