<!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. hdu5306 Explosion

    题目链接 题意 有n个房间,每个房间里面有若干把钥匙,每把钥匙可以打开对应的一扇门.如果手中没有钥匙,就要随机轰炸一个房间来打开这个房间.如果有钥匙,就要去打开这些房间.问期望轰炸次数是多少. 思路 ...

  2. 斯坦福大学公开课机器学习：advice for applying machine learning - deciding what to try next（设计机器学习系统时，怎样确定最适合、最正确的方法）

    假如我们在开发一个机器学习系统,想试着改进一个机器学习系统的性能,我们应该如何决定接下来应该选择哪条道路? 为了解释这一问题,以预测房价的学习例子.假如我们已经得到学习参数以后,要将我们的假设函数放到 ...

  3. PHP ACCESS-CONTROL-ALLOW-ORIGIN ,设置跨域头

    php里允许别的域名跨域访问,先解释下跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同 ...

  4. 随机数Random

    掷骰子10次,统计1.2出现的次数 public static void Main(string[] args) { ,a2=; Random random=new Random();//创建随机数对 ...

  5. 我眼中的正则化（Regularization）

    警告:本文为小白入门学习笔记 在机器学习的过程中我们常常会遇到过拟合和欠拟合的现象,就如西瓜书中一个例子: 如果训练样本是带有锯齿的树叶,过拟合会认为树叶一定要带有锯齿,否则就不是树叶.而欠拟合则认为 ...

  6. JS(基础)_总结获取页面中元素和节点的方式

    一.前言 1.元素和节点的区别 2.总结获取元素的方式 3.总结获取节点的方式 二.主要内容 1.结点和元素的区别 (1)一些常见基本概念: 文档:document 元素:页面中所有的标签 结点:页面 ...

  7. C++: 可变参数；

    可变参数,即参数的个数是动态变化的, 可多可少. 1. 可变参数: 可变参数一般采用”..."表示,用在宏上表示变参宏, 如: #define WriteLine(format,...) p ...

  8. RHCE基础环境系统的搭建

    RHCE基础环境系统的搭建 安装前提: 安装的时候对系统和硬件的要求: 红帽系统安装队系统的要求:Windows操作系统选择64位的内存至少6GCPU需要支持虚拟化技术在做红帽系统实验的时候,把360 ...

  9. Python基础01

    Python基础 1.Python介绍 2.安装 3.Hello World程序 4.变量 5.用户输入 6.表达式if ...else语句 7.表达式for 循环 8.表达式while 循环 9.数 ...

  10. Hadoop HDFS常用操作命令

    hadoop常用命令:hadoop fs查看Hadoop HDFS支持的所有命令 hadoop fs –ls列出目录及文件信息 hadoop fs –lsr循环列出目录.子目录及文件信息 hadoop ...