模态框

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. nginx,tornado,websocket,supervisord配置成型

    因为要上生产环境,所以配置还是专业一些比较好. nginx.conf upstream websocket_host { server 127.0.0.1:9527; } location /ws_l ...

  2. symfony2笔记

    路由可以在全局定义,也可以在单个bundle内部定义 全局定义:app/config/routing.yml 局部bundle定义:src/Miyaye/webBundle/Resources/con ...

  3. python-paramiko初体验

    什么pexpect.pxshll在paramiko面前都是浮云,重要的是paramiko支持windows. 小试牛刀 import paramiko paramiko.util.log_to_fil ...

  4. Java大数练习第二弹

    hdu1250 水题 题目链接:pid=1250">http://acm.hdu.edu.cn/showproblem.php?pid=1250 import java.util.*; ...

  5. UVA 11423 - Cache Simulator (树状数组)

    UVA 11423 - Cache Simulator (树状数组) option=com_onlinejudge&Itemid=8&category=523&page=sho ...

  6. linux替换目录下所有文件中的某字符串

    linux替换目录下所有文件中的某字符串 比如,要将目录/modules下面所有文件中的zhangsan都修改成lisi,这样做: sed -i "s/zhangsan/lisi/g&quo ...

  7. MODULE_DEVICE_TABLE的理解【转】

    本文转载自:http://blog.csdn.net/sidely/article/details/39666471 在Linux IIC驱动中看到一段代码: static struct platfo ...

  8. 深入理解7816（3）-----关于T=0 【转】

    本文转载自:http://blog.sina.com.cn/s/blog_4df8400a0102vcyp.html 深入理解7816(3)-----关于T=0 卡片和终端之间的数据传输是通过命令响应 ...

  9. 【TJOI 2018】数学计算

    [题目链接] 点击打开链接 [算法] 线段树维护区间乘积 [代码] #include<bits/stdc++.h> using namespace std; #define MAXQ 10 ...

  10. JDK8中函数式流编程推荐

    强烈推荐使用Java8中函数流API库来处理集合相关的数据,今天又看来一个项目代码里面用到来很多这样的处理,基本上可以解决大部分遍历问题.并且代码简洁清晰. JAVA8与lambda表达式 JDK8  ...