js学习笔记（捕获机制~特效：冒泡机制的应用，蒙版效果，登录页面）

最新推荐文章于 2024-06-22 15:10:18 发布

甜甜今天学了吗

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量185

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/dawanhjiao/article/details/105929164

版权

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
评论
js学习笔记（捕获机制~特效：冒泡机制的应用，蒙版效果，登录页面）

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

扫一扫