<!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. n+lognlogV查找最大值

    来自Blogewoosh #6. 啃了一下,写个翻译吧. 问题:你有一个数组,你不知道每个元素的大小,但是能够提出询问:a[x]是否>=v?你需要找出这个数组的最大值,只能询问n + lognl ...

  2. 用标准C编写COM dll

    参考资料: 用标准C编写COM(一)COM in plain C,Part1 (http://blog.csdn.net/wangqiulin123456/article/details/809235 ...

  3. R语言修改标题、坐标轴刻度、坐标轴名称的大小（cex.axis、cex.lab、cex.main函数）

    修改标题.坐标轴刻度.坐标轴名称的大小,用到了cex.axis.cex.lab.cex.main函数,其中,cex.axis表示修改坐标轴刻度字体大小,cex.lab表示修改坐标轴名称字体大小,cex ...

  4. HTML学习笔记Day1

    一.网站建设流程 1.注册域名(网址) 2.租用空间(服务器) 3.网站建设 (1)确定网站主题(项目) (2)搜集材料(项目) (3)规划网站(UI) (4)制作页面(前端--后端) 4.网络推广 ...

  5. mysql中使用存储过程方法中的注意事项

    public function getFxOrderList($openId,$condition='',$curentPage=1,$pagesize =10){ return $this-> ...

  6. Java运算符和引用数据类型（Scanner、Random）

    运算符 算术运算符: 运算符 运算规则 范例 结果 + 正号 +3 3 + 加 2+3 5 + 连接字符串 “中”+“国” “中国” - 负号 int a=3;-a -3 - 减 3-1 2 * 乘 ...

  7. ojdbc6下载地址

    https://www.oracle.com/technetwork/database/enterprise-edition/jdbc-112010-090769.html oracle驱动先去官网下 ...

  8. Http接口开发（自测服务端客户端）

    一.  Http与Https的区别             1.概念       HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传 ...

  9. hadoop 2.5 安装部署

    hadoop 下载地址:http://mirrors.cnnic.cn/apache/hadoop/common/ 单机伪分布 配置文件: /hadoop-2.5.1/etc/hadoop/ hado ...

  10. Oracle分析函数-rank() over(partition by...order by...)

    select *from ( SELECT t.s#,---学号 t.c#,---课程号 T.SCCORE, ---成绩 RANK() OVER(PARTITION BY t.c# ORDER BY ...