模态框

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. 非常适合新手的jq/zepto源码分析03

    zepto.fragment = function(html, name, properties) { var dom, nodes, container // 如果是简单的标签<div> ...

  2. VS2017-NetCore项目整合Log4Net

    1新建NetCore项目,我这里NetCoreSDK版本是2.2.0. 2.进入NuGet程序包官网 : https://www.nuget.org,搜索以下两个包并安装到项目中. Microsoft ...

  3. sizeThatFits and sizeToFit

    http://liuxing8807.blog.163.com/blog/static/9703530520134381526554/ sizeThatFits and sizeToFit是UIVie ...

  4. HDU 1133 Buy the Ticket 卡特兰数

    设50元的人为+1 100元的人为-1 满足前随意k个人的和大于等于0 卡特兰数 C(n+m, m)-C(n+m, m+1)*n!*m! import java.math.*; import java ...

  5. javascript 事件对象（event 对象）

    原文: http://www.cnblogs.com/songyaqi/p/5204143.html <html> <head> <title> Track Mou ...

  6. 【Android自己定义View实战】之自己定义超简单SearchView搜索框

    [Android自己定义View实战]之自己定义超简单SearchView搜索框 这篇文章是对之前文章的翻新,至于为什么我要又一次改动这篇文章?原因例如以下 1.有人举报我抄袭,原文链接:http:/ ...

  7. 分布式软件体系结构风格（C/S，B/S）

    分布式软件体系结构风格 1.  三层C/S结构 2.  三层B/S结构 了解很多其它软件体系结构 三层C/S结构(3-Tier C/S Architecture) §第1层:用户界面GUI-表示层-- ...

  8. srm 539

    http://mlz000.github.io/2015/07/15/srm-539/ 250 Description: 从若干个盒子中随意选择几个装石头.每一个盒子容量都有上下限,一旦选择使用某个盒 ...

  9. 我所不知道的 javascript 函数

    对字符串进行 Base64 加密: window.btoa(str) ---转码 window.atob(str) ---解码 这种加密方法不能加密中文,可以先进行 encodeURIComponen ...

  10. Mysql 存储引擎中InnoDB与MyISAM差别(网络整理)

    1. 事务处理 innodb 支持事务功能,myisam 不支持. Myisam 的运行速度更快,性能更好. 2,select ,update ,insert ,delete 操作 MyISAM:假设 ...