<!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. 树结构关系的数据导出为excel

    该文针对的是关于树结构的数据的导出,每一个节点都可以创建不定数的子节点,在选择好某个节点进行导出 时,会把该节点以及子节点的数据都导出来.导出后的excel的格式大概如下图的形式,这个是一个比较理想 ...

  2. 登录rabbitmq报错User can only log in via localhost

    在访问管理界面使用guest用户登录时出现login failed错误. 到服务器上查询日志显示出现错误的原因是:HTTP access denied: user ‘guest’ - User can ...

  3. 【洛谷P1507 NASA的食物计划】

    题目背景 NASA(美国航空航天局)因为航天飞机的隔热瓦等其他安全技术问题一直大伤脑筋,因此在各方压力下终止了航天飞机的历史,但是此类事情会不会在以后发生,谁也无法保证,在遇到这类航天问题时,解决方法 ...

  4. Xml一（基本语法和约束）、

    XML:eXtensible Markup Language 可扩展标记语言 version="1.0" * 可扩展:所有的标签都是自定义的. * 功能:数据存储 * 配置文件 * ...

  5. 【BZOJ3894】【Luogu3358】文理分科 - 最小割多选一模型

    链接Click Here 这个题就是个板子的最小割多选一模型啦\(QwQ\),这里介绍一种通用的解法. 抛开组合收益不谈,这个题就是一个简单的最小割模型.我们只需要建出来这样一张图,在上面跑最小割,割 ...

  6. GD32 ------ 使用外部中断，中断函数需要延时才能读到真正电平

    MCU:GD32F103RCT6 中断引脚没有外界上拉电阻 中断配置如下: RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOC|RCC_APB2Periph_AFI ...

  7. IO以及file的一些基本方法

    IO定义:将内存的数据 持久化到设备上 这个动作称为输出 写 Output操作 把硬盘上的数据读取到内存 这个动作称为输入 读 Input 把上面这两种操作称为IO操作 File类的静态成员变量:pa ...

  8. 序列化serialize与反序列化unserialize

    有利于存储和传递value(除了resource类型外),却不会丢失其原有类型和结构. serialize序列化时会调用魔术方法__sleep(); unserialize反序列化时会调用魔术方法__ ...

  9. 【转】第8章 前摄器（Proactor）：用于为异步事件多路分离和分派处理器的对象行为模式

    目录: Reactor(反应堆)和Proactor(前摄器) <I/O模型之三:两种高性能 I/O 设计模式 Reactor 和 Proactor> <[转]第8章 前摄器(Proa ...

  10. HTML5 accesskey的用法

    <button onclick="start()" accesskey="s">开始</button> <button oncli ...