<!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. [bzoj1563][诗人小g]

    bzoj1563 思路 首先考虑\(n^2\)的暴力dp,用sum[i]表示前i句话的长度总和.f[i]表示前i句话最小的不协调度之和.转移的时候考虑枚举前面的每个点,找到转移的最优秀的那个点. 然后 ...

  2. 构建flutter环境并实现属于我们的hello world

    我们知道flutter和react-native一样,都是既可以运行在andorid也可以运行在iOS环境下的. 我之前是react-native开发者,我的电脑环境中已经安装好了jdk,sdk,以及 ...

  3. 将vcf文件转化为plink格式并且保持phasing状态

    VCFtools can convert VCF files into formats convenient for use in other programs. One such example i ...

  4. 面试遇到两个稍显变态的题目，mark一下

    一. 答案: 二. 这个实际上就是删掉了最大的元素之后,再找一次max,于是就是第二大的元素了. 我也这么想过,但是我基础不好,忘了有max方法,于是就想着两次遍历,但是就不符合题意了 图中的答案甚好 ...

  5. IO 多路复用介绍

    IO多路复用 概念说明 在进行解释之前,首先要说明几个概念: 用户空间和内核空间 进程切换 进程的阻塞 文件描述符 缓存 I/O 用户空间与内核空间 现在操作系统都是采用虚拟存储器,那么对32位操作系 ...

  6. mysql全备份脚本速查

    mysql全备份脚本 # 快捷备份方式[root@nb scripts]# cat db.backup.sh #!/bin/bashmysqldump -ubackup -pbackuppwd -P3 ...

  7. Mysql数据约束 整理

    数据约束 1.默认值: 作用: 当用户对使用默认值的字段不插入值的时候,就使用默认值. 注意: 1)对默认值字段插入null是可以的. 2)对默认值字段可以插入非null   CREATE TABLE ...

  8. 集成学习算法汇总----Boosting和Bagging（推荐AAA）

     sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  9. gcc生成含有C信息的汇编

    title: gcc生成含有C信息的汇编 tags: gcc date: 2018-10-24 23:40:19 --- https://www.cnblogs.com/fengkang1008/p/ ...

  10. 【SSL】WebClient 请求 https 页面出错:未能创建 SSL/TLS 安全通道

    #问题: 当向一个https的url上发送请求,报错:未能创建 SSL/TLS 安全通道: using (WebClient client = new WebClient()) { string ad ...