<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>on</title>

</head>

<body>

<input type="text"><input type="button" value="添加">

<ul>

</ul>

<script src="js/jQuery3.3.1.js"> </script>

<script>

    $(function () {

        $("ul").on("click", "li", function () {  //事件代理

           console.log($(this).text())    //记住$ 取当前值

        });

        $("input[type=button]").click(function () {

            let txt = $("input[type=text]").val();    //input取值用val

            $(`<li>${txt}</li>`).appendTo("ul");

            })

         //未来追加的元素  是没有事件 我们通过事件委托  当你出现点击页面中的DOM没有任何反应

        //1.DOM是否underfine  2.考虑事件代理

    })

</script>

</body>

</html>

事件代理on的更多相关文章

  1. JavaScript事件代理和委托（Delegation）

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  2. Atitit事件代理机制原理 基于css class的事件代理

    Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...

  3. js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  4. js事件代理（委托）

    JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...

  5. JS 事件代理

    事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...

  6. jquery事件代理

    在jQuery中,事件代理是指:把事件绑定到父级元素,然后等待事件通过DOM冒泡到该元素时再执行. 在事件侦听过程中有两种触发事件的方式:事件捕获和事件冒泡.事件冒泡更快,效率更高. 事件捕获:事件在 ...

  7. 封装Js事件代理方法

    // 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(eleme ...

  8. js事件代理

    需要注意的blog:http://blog.csdn.net/majian_1987/article/details/8591385 一篇博客看懂  http://blog.csdn.net/maji ...

  9. javascript事件代理（委托）

    之前有接触过事件代理,但是印象并不深刻.这次记下来加强印象. 用个大家比较常见的代码举例子: html dom结构: <ul id="ul1"> <li>0 ...

  10. angular事件代理

    在angular中,是不支持事件代理的,有些时候,我们需要处理比较多的数据,尤其是一些列表的时候,可能会很多,如果给每一项都加事件的话,注定慢很多,为了解决这个事情,因此需要一个做事件代理的direc ...

随机推荐

  1. A1002. A+B for Polynomials

    This time, you are supposed to find A+B where A and B are two polynomials. Input Each input file con ...

  2. 数据库之sql语句汇总20180616

    /*******************************************************************************************/ 一.SQL简 ...

  3. POJ3734Blocks（递推+矩阵快速幂）

    题目链接:http://poj.org/problem?id=3734 题意:给出n个排成一列的方块,用红.蓝.绿.黄四种颜色给它们染色,求染成红.绿的方块个数同时为偶数的方案数模10007的值. 题 ...

  4. Apache Ant 项目构建

    项目构建:通过构建工具对多个项目进行统一批量的编译和运行,比如,对多个Jmeter脚本批量运行 1.Ant是什么? Ant是 构建工具,Apache Ant是一个将软件编译.测试.部署等步骤联系在一起 ...

  5. python enumarate方法的使用

    '''enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中.'''

  6. tensorflow中tf.ConfigProto()用法解释

    在看C3D代码的时候,看见有一段代码是 config = tf.ConfigProto()#主要是配置tf.Session的运行方式,GPU还是CPU,在这里选择的是GPU的运行方式 config.g ...

  7. 苹果电脑利用wget总是会出现无法建立 SSL 连接的问题

    在做迁徙学习的过程中,需要下载已经训练好的Inception_v3模型,首先我们为了将下载的模型保存到指定的地方,我们需要利用 wget -P 想要保存的目录 模型的网址,例如 wget -P /Vo ...

  8. Microsoft Windows CVE-2017-8464 LNK 远程代码执行漏洞(复现）

    2017年6月13日,微软官方发布编号为CVE-2017-8464的漏洞公告,官方介绍Windows系统在解析快捷方式时存在远程执行任意代码的高危漏洞,黑客可以通过U盘.网络共享等途径触发漏洞,完全控 ...

  9. npm总是报错：unable to verify the first certificate

    今天npm install总是报错:unable to verify the first certificate(无法验证第一证书),查了一下发现 As of February 27, 2014, n ...

  10. Centos 6\7下yum安装rstudio-server\shiny-server

    rstudio-server安装 #wget https://download2.rstudio.org/rstudio-server-rhel-1.1.463-x86_64.rpm #yum ins ...