<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        li{

            border: 1px solid #ddd;

            cursor: pointer;

        }

    </style>

    <script>

        /**

         *    事件委托：

         *      事件委托添加事件，其实并不是直接添加给目标元素，

         *          而是往往给父元素添加事件，

         *          再通过event.target找到目标元素，

         *          判断event.target是否为我们要查找的元素，满足条件执行代码

         *

         * */

        window.onload = function () {

            var list = document.getElementById('list');

            /*1) 普通for循环注册事件*/

            console.time("for循环绑定");

            for(var i = 0 ; i < list.length; i++ ) {

                list.children[i].index = i;

                list.children[i].onclick = function () {

                    alert("给到全部li注册事件"+this.index)

                }

            }

            console.timeEnd("for循环绑定");

            /*  2)   事件委托注册事件

            *           事件委托绑定事件其实并不是直接绑定给目标元素

            *           而是往往绑定给父元素

            * */

            console.time('事件委托绑定');

            list.onclick = function (event) {

                if(event.target.nodeName.toLowerCase() == "li") {

                    alert("给到全部li注册事件")

                }

            }

            console.timeEnd("事件委托绑定");

        }

    </script>

</head>

<body>

<ul id="list">

    <li>这个是第001个列表</li>

    <li>这个是第002个列表</li>

    <li>这个是第003个列表</li>

    <li>这个是第004个列表</li>

    <li>这个是第005个列表</li>

    <li>这个是第006个列表</li>

    <li>这个是第007个列表</li>

    <li>这个是第008个列表</li>

    <li>这个是第009个列表</li>

    <li>这个是第010个列表</li>

    <li>这个是第011个列表</li>

    <li>这个是第012个列表</li>

    <li>这个是第013个列表</li>

    <li>这个是第014个列表</li>

    <li>这个是第015个列表</li>

    <li>这个是第016个列表</li>

    <li>这个是第017个列表</li>

    <li>这个是第018个列表</li>

    <li>这个是第019个列表</li>

    <li>这个是第020个列表</li>

    <li>这个是第021个列表</li>

    <li>这个是第022个列表</li>

    <li>这个是第023个列表</li>

    <li>这个是第024个列表</li>

    <li>这个是第025个列表</li>

    <li>这个是第026个列表</li>

    <li>这个是第027个列表</li>

    <li>这个是第028个列表</li>

    <li>这个是第029个列表</li>

    <li>这个是第030个列表</li>

    <li>这个是第031个列表</li>

    <li>这个是第032个列表</li>

    <li>这个是第033个列表</li>

    <li>这个是第034个列表</li>

    <li>这个是第035个列表</li>

    <li>这个是第036个列表</li>

    <li>这个是第037个列表</li>

    <li>这个是第038个列表</li>

    <li>这个是第039个列表</li>

    <li>这个是第040个列表</li>

    <li>这个是第041个列表</li>

    <li>这个是第042个列表</li>

    <li>这个是第043个列表</li>

    <li>这个是第044个列表</li>

    <li>这个是第045个列表</li>

    <li>这个是第046个列表</li>

    <li>这个是第047个列表</li>

    <li>这个是第048个列表</li>

    <li>这个是第049个列表</li>

    <li>这个是第050个列表</li>

    <li>这个是第051个列表</li>

    <li>这个是第052个列表</li>

    <li>这个是第053个列表</li>

    <li>这个是第054个列表</li>

    <li>这个是第055个列表</li>

    <li>这个是第056个列表</li>

    <li>这个是第057个列表</li>

    <li>这个是第058个列表</li>

    <li>这个是第059个列表</li>

    <li>这个是第060个列表</li>

    <li>这个是第061个列表</li>

    <li>这个是第062个列表</li>

    <li>这个是第063个列表</li>

    <li>这个是第064个列表</li>

    <li>这个是第065个列表</li>

    <li>这个是第066个列表</li>

    <li>这个是第067个列表</li>

    <li>这个是第068个列表</li>

    <li>这个是第069个列表</li>

    <li>这个是第070个列表</li>

    <li>这个是第071个列表</li>

    <li>这个是第072个列表</li>

    <li>这个是第073个列表</li>

    <li>这个是第074个列表</li>

    <li>这个是第075个列表</li>

    <li>这个是第076个列表</li>

    <li>这个是第077个列表</li>

    <li>这个是第078个列表</li>

    <li>这个是第079个列表</li>

    <li>这个是第080个列表</li>

    <li>这个是第081个列表</li>

    <li>这个是第082个列表</li>

    <li>这个是第083个列表</li>

    <li>这个是第084个列表</li>

    <li>这个是第085个列表</li>

    <li>这个是第086个列表</li>

    <li>这个是第087个列表</li>

    <li>这个是第088个列表</li>

    <li>这个是第089个列表</li>

    <li>这个是第090个列表</li>

    <li>这个是第091个列表</li>

    <li>这个是第092个列表</li>

    <li>这个是第093个列表</li>

    <li>这个是第094个列表</li>

    <li>这个是第095个列表</li>

    <li>这个是第096个列表</li>

    <li>这个是第097个列表</li>

    <li>这个是第098个列表</li>

    <li>这个是第099个列表</li>

</ul>

</body>

</html>

JavaScript--事件委托--冒泡的更多相关文章

  1. JavaScript 事件委托的技术原理

    如今的 JavaScript 技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们 ...

  2. JavaScript事件委托的技术原理

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

  3. javascript事件委托机制详解

    以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...

  4. JavaScript 事件委托

    JavaScript事件委托,或者叫事件代理,是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 借花献佛的例子(取快递): 有三个同事预计会在周一收到快递.为签收快递,有两种办法 ...

  5. 关于javaScript事件委托的那些事

    今天是第一次写稿,还是有那么一丢丢小鸡冻...回归正题啦... 关于javaScript事件委托不得不说的那些事,为什么要使用事件委托? 我们可以这么说,假设老板要分配一项任务,首先要秘书叫A君来到办 ...

  6. JavaScript事件捕获冒泡与捕获

    事件流 JavaScript中,事件流指的是DOM事件流. 概念 事件的传播过程即DOM事件流.事件对象在 DOM 中的传播过程,被称为"事件流".举个例子:开电脑这个事,首先你是 ...

  7. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  8. 浅析JavaScript事件流——冒泡

    一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...

  9. javascript 事件委托,jq,js模拟事件

    <!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...

  10. Javascript事件委托

      事件委托利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件未使用事件委托之前: <!DOCTYPE html> <html> <head> &l ...

随机推荐

  1. 全栈之路-微信小程序-SKU开发（代码）

    SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践. 一.代码结构的分析 1.说明几 ...

  2. 【NOIP2013模拟联考7】OSU

    [NOIP2013模拟联考7]OSU 描述 Description osu 是一款群众喜闻乐见的休闲软件. 我们可以把osu的规则简化与改编成以下的样子: 一共有n次操作,每次操作只有成功与失败之分, ...

  3. day65——day69

    目录 DAY65 课堂笔记 1.vue实例 2.插值表达式 3.文本指令 4.面向对象js 5.js函数补充 6.事件指令 7.属性指令 DAY66 课堂笔记 1.表单指令 2.条件指令 3.循环指令 ...

  4. 2019.10.29 csp-s模拟测试93 反思总结

    T1: 求出前缀和,三维偏序O(nlog2n)CDQ 二维其实就可以 #include<iostream> #include<cstdio> #include<cstri ...

  5. 关于hive表同步类型问题

    今天华为做实施的时候发现kylin做刷cube的时候发现源表数据类型不适合刷到kylin提供查询接口.问了下同事发现一个比较简单的解决办法. 源表是String类型,做hive视图可以做个hive表提 ...

  6. java代码乱序问题

    java两个线程互相访问的时候并不能按照你的思路运行,因为执行语句可能有前后快慢之分,比如a=1和flag=true.下面线程B访问的时候 这两个赋值语句不一定按顺序执行 产生这种原因是因为指令重排序 ...

  7. java 集合存储对象且根据对象属性排序

    方法一:根据java1.8lambda表达式进行排序 Comparator<RateInfo> comparator = (t1, t2) -> t1.getRateCode().c ...

  8. Coreutils - GNU core utilities

    coreutils 是GNU下的一个软件包,包含linux下的 ls等常用命令.这些命令的实现要依赖于shell程序.一般在系统中都默认安装,也可自己安装或更新.例如,安装coreutils-6.7. ...

  9. c++使用优先队列时自定义优先出队顺序（和sort）

    优先队列也是一种先进先出的数据结构,元素从队尾入队,从队头出队,但是优先队列相较一般队列多了一个判断优先级的功能,在当前队列中,优先级最高的元素将被第一个删除. 先看一下优先队列的定义 templat ...

  10. TZ_13_Hystix的服务降级_线程隔离

    1.微服务中,服务之间的调用关系复杂. 一个请求有可能需要多个微服务接口才能实现.如果一次请求出现问题就会直接堵塞,占用一次tomcat链接.如果访问这个出现问题的请求就会造成tomcat请求链接都被 ...