<!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. A1043. Is It a Binary Search Tree

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  2. bzoj2208 连通数(bitset优化传递闭包)

    题目链接 思路 floyd求一下传递闭包,然后统计每个点可以到达的点数. 会tle,用bitset优化一下.将floyd的最后一层枚举变成bitset. 代码 /* * @Author: wxyww ...

  3. C# Socket的安全关闭

    网络编程中,socket的安全关闭方法 /// <summary> /// Close the socket safely. /// </summary> /// <pa ...

  4. django（六）之ORM数据库操作

    https://www.cnblogs.com/haiyan123/p/7732190.html 一.ORM介绍 ORM——object relation mapping 映射关系: 表名 ----- ...

  5. django 前端模板继承显示model中使用choices的字段

    比如model中的一个class Need class Need(models.Model): """ 任务 """ party_a=mod ...

  6. 第十一篇- 实现APK打开文件功能

    MainActivity.java package com.example.aimee.aimeetest3; import android.content.Context; import andro ...

  7. RenderTree渲染树

    RenderTree渲染树对类中的静态成员有很重要的关系,这个和多态是有很重要的关系,举个简单的例子,在游戏中,马里奥需要渲染,蘑菇也需要渲染,怪兽也需要渲染,其是串在一个树上的,但是不同的类型怎么将 ...

  8. poj 2955"Brackets"(区间DP)

    传送门 https://www.cnblogs.com/violet-acmer/p/9852294.html 题意: 给你一个只由 '(' , ')' , '[' , ']' 组成的字符串s[ ], ...

  9. 类图uml

    画类图或时序的软件类图astah-community-6_9_0-b4c6e9-jre-setup        先写总体架构再写流程图 即先写类图再流程图 b ^ | a a继承b   工具类是us ...

  10. selenium-网站demo学习-test Design-优化自动化代码

    看selenium的网站的文档,里面的自动化用例设计有一些小点很靠谱.学了很多,可以用作优化自己的代码. 1.测试类型: Testing Static Content Testing Links Fu ...