js学习笔记(捕获机制~特效:冒泡机制的应用,蒙版效果,登录页面)

js事件传递机制

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
默认值为 false, 即冒泡传递
当值为 true 时, 事件使用捕获传递


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习title>
    <style type="text/css">
        #father{
            width: 400px;
            height: 400px;
            background-color: red;
        }
    style>
head>
<body>
<div id="father">
    <button id="btn">点我button>
div>
<script>
   var btn = document.getElementById('btn');
   var father = document.getElementById('father');
   btn.addEventListener('click',function (ev) {
       alert('点击了按钮');
       /*点了按钮之后,先是触发'点击了father'
       然后再触发'点击了按钮'
        */
   },true);
   father.addEventListener('click',function (ev1) {
       alert('点击了father');
       //这个只触发'点击了father',因为它的外部没有设置事件
   },true)
script>
body>
html>

实现块元素百分比的情况下居中

			left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);

效果图
1.页面宽高正常时显示
js学习笔记(捕获机制~特效:冒泡机制的应用,蒙版效果,登录页面)_第1张图片
2.页面宽高缩放时显示
js学习笔记(捕获机制~特效:冒泡机制的应用,蒙版效果,登录页面)_第2张图片

特效:冒泡机制的应用,蒙版效果,登录页面


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡机制的应用title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height:3000px;
        }/*不写也行,没有影响,写了显得专业*/
        #mengban{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.4;/*指定不透明度。从0.0(完全透明)到1.0(完全不透明)*/
            width: 100%;
            height: 100%;
            background-color: black;
            display: none;
        }
        #denglu{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);/*实现块元素百分比的情况下居中*/
            display: none;
        }
    style>
head>
<body>
<button id="btn">立即登录button>
<div id="mengban">div>
<div id="denglu">div>
<script src="工具/Tool.js">script>
<script>
    window.addEventListener('load',function (ev) {
        Tool.$('btn').addEventListener('click',function (ev1) {
            //阻止冒泡
            if (ev1 && ev1.stopPropagation){ //w3c标准
                ev1.stopPropagation();
            }else{ //ie系列
                ev1.cancelBubble = true;
            }
            Tool.$('mengban').style.display = 'block';
            Tool.$('denglu').style.display = 'block';
            //因为蒙版的高只设置了100%,所以要隐藏页面超出的部分
            //隐藏滚动条
            document.body.style.overflow = 'hidden';
        });
        //监听点击文档
        document.addEventListener('click',function (ev2) {
            var e = ev2 || window.event;
            //获取点击标签
            var targetId = e.target ? e.target.id : e.srcElement.id;
            //判断
            if (targetId !== 'denglu'){
                //除了登录之外的地方点击后要让蒙版、登录、滚动条恢复原样
                Tool.$('mengban').style.display = 'none';
                Tool.$('denglu').style.display = 'none';
                document.body.style.overflow = 'auto';
            } else{
                window.location.href = 'https://www.csdn.net/'; 
                //点击登录块,登录到 https://www.csdn.net/(csdn)
            }
        })
    })
script>
body>
html>

你可能感兴趣的:(js学习笔记(捕获机制~特效:冒泡机制的应用,蒙版效果,登录页面))