模态框

1、因为a链接和和顶级document都注册了单击事件，所以要阻止a链接向父级盒子冒泡，不然又会从document的单击事件走一遍

2、在document的单击事件中，只需要判断触发事件的目标元素是不是白色盒子部分就行了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        body, html {

            height: 100%;

        }

        .mask {

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0;

            left: 0;

            background: rgba(0, 0, 0, 0.6);

            display: none;

        }

        .login {

            width: 200px;

            height: 200px;

            background: white;

            margin: 200px auto;

            border: 3px solid #FFA25E;

        }

    </style>

</head>

<body>

<a href="#">注册</a>

<a href="#">登陆</a>

<div class="mask">

    <div class="login" id="login"></div>

</div>

<script>

    //需求：点击登陆a链接，显示模态框，之后点击除了中间白色登陆框部分，都可以将模态框部分隐藏

    var a = document.getElementsByTagName("a")[1];

    var mask = document.getElementsByTagName("div")[0];

    a.onclick = function (ev) {

        ev = ev || window.event;

        mask.style.display = "block";

        if (ev || ev.stopPropagation) {

            ev.stopPropagation();

        } else {

            ev.cancelBubble = true;

        }

    }

    document.onclick = function (ev) {

        ev = ev || window.event;

        var targetId = ev.target ? ev.target.id : ev.srcElement.id;

        if (targetId !== "login") {

            mask.style.display = "none";

        }

    }

</script>

</body>

</html>

事件委托

1、普通注册事件没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托。

2、虽然新追加的li标签没有注册上单击事件，但是冒泡的特性会找到其父标签，恰好父标签注册了单击，而触发事件的target目标元素如果是li标签就好办了。

3、注意通过event.target.tagName获取的值是大写的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        ul {

            width: 100px;

            margin: 50px auto;

        }

        li {

            background: #CCA55B;

            margin: 10px;

            cursor: pointer;

            text-align: center;

        }

    </style>

</head>

<body>

<button>创建新人</button>

<ul>

    <li>老人</li>

    <li>老人</li>

    <li>老人</li>

    <li>老人</li>

</ul>

<script>

    var btn = document.getElementsByTagName("button")[0];

    var ul = document.getElementsByTagName("ul")[0];

    // for (var i = 0; i < ul.children.length; i++) {

    //     ul.children[i].onclick = function () {

    //         console.log(this.innerHTML);

    //     }

    // }

    btn.onclick = function () {

        for (var i = 0; i < 4; i++) {

            var li = document.createElement("li");

            li.innerHTML = "新人";

            ul.appendChild(li);

        }

    }

    ul.onclick = function (ev) {

        ev = ev || window.event;

        var target = ev.target ? ev.target : ev.srcElement;

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

            console.log(target.innerHTML);

        }

    }

</script>

</body>

</html>

JS——冒泡案例的更多相关文章

  1. JS冒泡事件 与 事件捕获

    JS冒泡事件 与 事件捕获 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> < ...

  2. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  3. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  4. js冒泡法和数组转换成字符串示例代码

    将数组转换成字符串的方法有很多,讲解下js冒泡法的使用.js代码: //js冒泡法与数据转换为字符串的例子 //整理:www.jbxue.com window.onload = function(){ ...

  5. Js冒泡事件详解及阻止

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html>     & ...

  6. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  7. 浅谈js冒泡事件2

    js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...

  8. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  9. 正則表達式--js使用案例

    前言:在前端页面使用中.遇到日期格式的验证.開始使用了一款表单控件验证.可是不兼容!!并且使用起来还受到非常大约束.所以就决定自己写原生js. 为了完毕日期格式的验证.第一步,当然是学会使用正則表達式 ...

随机推荐

  1. [USACO1.2]挤牛奶Milking Cows

    题目描述 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300秒(从5点开始计时)给他的牛挤奶,一直到1000秒.第二个农民在700秒开始,在 1200秒结束.第三个农民在1500秒开 ...

  2. Linux下汇编语言学习笔记80 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  3. Ubuntu 16.04安装Grub Customizer替代Startup-manager（解决找不到menu.lst，GRUB配置简单介绍）

    关于GRUB的介绍: http://baike.baidu.com/item/GRUB http://blog.csdn.net/bytxl/article/details/9253713 menu. ...

  4. 1.4－动态路由协议OSPF②

    LAB2.通过反掩码控制有哪些接口,在运行OSPF ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   step1:启动OSPF,并宣告网络: R1(config ...

  5. load函数

    load函数的作用 1.load函数的作用是,从server获取数据,而且把数据放到指定的元素(通常是div元素)中. 2.说的再具体一些就是,把获取到的数据插入到当前文档的某个div元素中. ser ...

  6. UIView的层介绍

    UIView的层介绍 subview在西安市到屏幕上时,是位于superview上层的. 同一个view的subview时依照增加的顺序显示相应层的.越晚增加的subview显示在越上层,反之也是如此 ...

  7. Hadoop生态系统学习路线

    主要介绍Hadoop家族产品,经常使用的项目包含Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa.新添加 ...

  8. Cocos2d-x v3.0正式版尝鲜体验【2】 Android平台移植

    今天没事又尝试了下3.0正式版关于Android平台的移植,把新建的项目移植了下.过程仅用了十分钟左右,什么概念?! 好吧,事实上我想说,这个版本号真的移植非常轻松啊,只是还没加上其它东西,只是就眼下 ...

  9. 由文字生成path后制作写字的动画

    在看以下这个开源组件的时候,发现一个非常棒的方法,能够将文字生成path,这样就能够作出用笔写字的效果了. https://github.com/MP0w/MPParallaxCollection 关 ...

  10. [Android]通过adb shell input上报命令模拟屏幕点击事件【转】

    本文转载自:http://blog.csdn.net/yuanzihui/article/details/52871652 常用的 input上报命令: input text 1234 实际向界面注入 ...