给列表元素添加点击事件：

在javaScript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能。

<li>标签的数量很大时，循环为每个子元素添加事件，绝非好方法。

有一种优雅的方法，就是事件委托。

使用事件委托只为<ul>元素添加一个onclick事件处理程序。

因为有事件冒泡机制，单击每个<li>标签时，都会被这个函数处理。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <ul id="container">

     <li>1</li>

     <li>2</li>

     <li>3</li>

     <li>4</li>

     <li>5</li>

 </ul>

 <body>

     <script>

         document.getElementById('container').addEventListener('click', function (event) {

             var target = event.target;

             console.log(event)

             if (target.tagName == 'LI') {

                 alert(target.innerText);

             }

         },false);

     </script>

 </body>

 </html>

JS事件委托应用场景的更多相关文章

  1. JS事件委托学习（转）

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  2. JS事件委托的原理和应用

    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...

  3. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

  4. 原生js事件委托（事件代理）方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  5. js事件委托

    什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...

  6. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  7. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  8. js事件委托和jQuery事件绑定on , off , one , bind , unbind , die

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  9. js 事件委托 事件代理

    JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...

随机推荐

  1. springMVC整理01--搭建普通的工程

    1. Spring MVC 简介Spring MVC 是 Spring 基于 MVC 设计理念提供的一个表现层的 Web 框架.是目前主流的MVC 框架之一.Spring MVC 通过一套 MVC 注 ...

  2. Java归并排序的递归与非递归实现

    该命题已有无数解释,备份修改后的代码 平均时间复杂度: O(NLogN)  以2为底 最好情况时间复杂度: O(NLogN) 最差情况时间复杂度: O(NLogN) 所需要额外空间: 递归:O(N + ...

  3. project 2013 设置工期为1个工作日，但开始时间与结束时间不是同一天

    1.问题描述 project2013在工期栏输入  1  ,在开始时间结束时间点自动安排,就会出现如下情况,会被误认为是两天 2.问题解决 文件-->选项-->常规-->日期格式选择 ...

  4. ansible 开源批量管理服务器工具

    Ansible 是一款基于 Python 开发的自动化运维工具,可以进行配置管理.批量部署等功能.对于机器较多的场景,可以使用 Ansible 来免去重复敲命令的烦恼. 安装ansibleyum -y ...

  5. HAOI2017 简要题解

    「HAOI2017」新型城市化 题意 有一个 \(n\) 个点的无向图,其中只有 \(m\) 对点之间没有连边,保证这张图可以被分为至多两个团. 对于 \(m\) 对未连边的点对,判断有哪些点对满足将 ...

  6. Leetcode 215. 数组中的第K个最大元素 By Python

    在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2 输出: 5 ...

  7. 【NowCoder368E】车站（线段树）

    [NowCoder368E]车站(线段树) 题面 牛客网 题解 链交的结果显然和求解的顺序无关,因此我们可以拿线段树维护区间链的链交结果. 然后怎么求解最远点. 维护链交的时候再记录两个点表示到达链交 ...

  8. JIRA和Confluence更改JVM内存大小解决访问打开缓慢问题

    原因: 根据主机物理内存不同,默认的java虚拟机内存也会不同(一个较低值),有时候不够用,可以修改默认设置,改善内存不足导致的问题. 操作步骤: JIRA 1. 打开至相应目录: ~]# cd  / ...

  9. Codeforces1076D. Edge Deletion（最短路树+bfs）

    题目链接:http://codeforces.com/contest/1076/problem/D 题目大意: 一个图N个点M条双向边.设各点到点1的距离为di,保证满足条件删除M-K条边之后使得到点 ...

  10. A1123. Is It a Complete AVL Tree

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...