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

js事件传递机制

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

<!DOCTYPE html>
<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.页面宽高正常时显示
在这里插入图片描述
2.页面宽高缩放时显示
在这里插入图片描述

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

<!DOCTYPE html>
<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值