zoukankan      html  css  js  c++  java
  • jQuery on注册事件

    在jQuery中,使用on统一所有事件的处理方式,主要有两种类型:

    (1)on注册简单事件

    (2)on注册委托事件

    (1)on注册简单事件
    /*
    * selector:表示执行事件的后代元素,若没有后代,则自己执行
    * click:传触发方式
    * function:传事件处理函数
    */
    $(selector).on( "click", function() {});

    (2)on注册委托事件

    /*
    * selector:表示执行事件的元素,若没有后代则自己执行
    * click:表示触发方式
    * span:表示执行事件的元素(后代)
    * function:表示事件处理函数
    */
    $(selector).on( "click",“span”, function() {});

    例如: $(document).on('click', ".removeclass", function () {})

    on注册事件的参数说明:
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <input type="button" value="增加" id="btn">
    <div>
    <p>A</p>
    <p>B</p> 
    </div>

    <script src="jquery-3.3.1.min.js"></script>
    <script>
    $(function () {
    // on注册事件的两种方式
    // 第一种-----为自己注册事件
    // 这种方式对于新建的元素不会附加事件
    /*$("p").on("click", function () {
    alert("hello world");
    });*/

    // 第二种----事件代理(为父元素注册事件)
    // 这种方式对于新建的子元素同样有事件附加
    $("div").on("click", "p", function () {
    alert("hello world")
    });

    //总结:对比上述两种注册方式可知,当on方法中传入了后代元素("p"),则表示注册委托事件,事件的执行元素是后代元素,若没有传入后代元素,则表示注册简单事件

    $("#btn").on("click", function () {
    $("<p>This is new </p>").appendTo("div");
    });

    });
    </script>

    </body>
    </html>

  • 相关阅读:
    测试驱动开发的意义何在
    Web自动化测试模式page object的小利器:gizmo
    在NANT使用Nunit2标签运行Nunit测试
    小试牛刀 Ruby on Rails
    敏捷回顾会议的思考
    ThoughtWorks技术校园行第二波 课程资料 CleanCode&DirtyCode
    从git merge 和 git rebase想到……
    Ruby中的深浅拷贝
    NUnit Extension小介绍
    如何写好的测试呢?
  • 原文地址:https://www.cnblogs.com/Depingblogs/p/13181457.html
Copyright © 2011-2022 走看看