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

在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. BZOJ2463[中山市选2009]谁能赢呢？——博弈论

    题目描述 小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问 ...

  2. Java大数练习

    大数阶乘 题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=28 import java.io.*; import java.util.*; ...

  3. 【XSY2667】摧毁图状树 贪心 堆 DFS序 线段树

    题目大意 给你一棵有根树,有\(n\)个点.还有一个参数\(k\).你每次要删除一条长度为\(k\)(\(k\)个点)的祖先-后代链,问你最少几次删完.现在有\(q\)个询问,每次给你一个\(k\), ...

  4. 【hdu6185】Covering（骨牌覆盖）

    2017ACM/ICPC广西邀请赛-重现赛1004Covering 题意 n*4的格子,用1*2和2*1的砖块覆盖.问方案数(mod 1e9+7).(n不超过1e9) 题解 递推了个式子然后错位相减. ...

  5. [luogu3157][bzoj3295][CQOI2011]动态逆序对【cdq分治+树状数组】

    题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...

  6. Annihilate(SA)

    题目描述 黑暗之主的蜈蚣几乎可以毁灭一切,因此小正方形陷入了苦战…… 小正方形现在需要减弱黑暗之主的攻击. 一个黑暗之主的攻击可以用一个仅有小写字母的字符串表示. 现在黑暗之主向小正方形发动了若干攻击 ...

  7. python爬虫解析库学习

    一.xpath库使用: 1.基本规则: 2.将文件转为HTML对象: html = etree.parse('./test.html', etree.HTMLParser()) result = et ...

  8. Codeforces Round #487 (Div. 2) C - A Mist of Florescence

    C - A Mist of Florescence 把50*50的矩形拆成4块 #include<bits/stdc++.h> using namespace std; ],b[]; ][ ...

  9. 洛谷P3265 装备购买

    这个大毒瘤题....居然反向卡精度.... 别的题eps要开小,这个毒瘤要开大... 我一开始是1e-12,挂的奇惨无比,50分...... 然后改成1e-7,就70分了... 1e-5 90分 1e ...

  10. 洛谷P2805 植物大战僵尸

    题意:给你一张图,每个节点保护若干节点. 当一个节点不被保护的时候,你就可以gay掉它. gay每个节点都有收益(可能为负),求最大总收益. 解:首先发现是一个最大权闭合子图. 把保护关系变成被保护, ...