addEventListener 事件监听

m0_71251536

已于 2022-06-17 15:25:48 修改

阅读量1.8k

点赞数 1

文章标签： p2p 网络协议网络

于 2022-06-14 20:10:56 首次发布

本文链接：https://blog.csdn.net/m0_71251536/article/details/125276255

版权

1，事件委托

不给子节点 li 设置事件监听器，而直接给父节点 ul 设置，利用冒泡原理影响每个子节点

<body>
    <ul>
        <li>知否知否，点我应有弹窗在手</li>
        <li>知否知否，点我应有弹窗在手</li>
        <li>知否知否，点我应有弹窗在手</li>
        <li>知否知否，点我应有弹窗在手</li>
        <li>知否知否，点我应有弹窗在手</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].style.backgroundColor = '';
            }
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

2,跟随鼠标

<script>
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;
            var img = document.querySelector('img');
            img.style.left = x-24 + 'px';
            img.style.top = y-24 + 'px';
        })
    </script>

3,仿快递单号查询，放大显示

<script>
        var input = document.querySelector('input');
        var con = document.querySelector('.con');
        input.addEventListener('keyup', function () { //1，先给表单添加键盘事件
            if (this.value == '') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block'; //2，然后con获得block属性
                con.innerHTML = this.value; //3，将表单value赋值给con
                input.addEventListener('blur', function () {
                    con.style.display = 'none';
                })
                input.addEventListener('focus', function () {
                    con.style.display = 'block';
                })
            }
        })

</script>

4，设置window浏览器窗口大小监听，小于800，div隐藏

<script>
        var div = document.querySelector('div');
        window.addEventListener('resize', function () {
            if (window.innerWidth < 800) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    </script>

5，定时器

    <script>
        setTimeout(function() {
            console.log('时间到了');
        }, 2000);
    </script>

调用写法

        function callback () {
            console.log('事件到');
        }
        setTimeout(callback,3000);

让盒子隐藏

        var div = document.querySelector('div');
        function xiaoshi () {
            div.style.display = 'none';
        }
        setTimeout(xiaoshi,3000);

//
        var div = document.querySelector('div');
        setTimeout(function() {
            div.style.display = 'none';
        },3000)

6,京东倒计时秒杀案例

   <script>
        var h = document.querySelector('span');
        var m = h.nextElementSibling; //这里用的是兄弟节点，注意sibling后面不加括号
        var s = m.nextElementSibling;
        var input = '2022-6-15 12:19:00';
        countDown(input);
        setInterval(countDown, 1000);

        function countDown() { //封装一个倒计时函数
            var nowtime = + new Date(); //将当下毫秒数赋值
            var inputtime = + new Date(input); // 获取指定时间的毫秒数
            var times = (inputtime - nowtime) / 1000;//秒数差值
            var hours = parseInt(times / 60 / 60 % 24);
            hours = hours >= 10 ? hours : '0' + hours;
            h.innerHTML = hours;
            var minute = parseInt(times / 60 % 60);
            minute = minute >= 10 ? minute : '0' + minute;
            m.innerHTML = minute;
            var second = parseInt(times % 60);
            second = second >= 10 ? second : '0' + second;
            s.innerHTML = second;
        }
    </script>

7,注册时常用的发送短信案例

<script>
        var btn = document.querySelector('button');
        var t = 3;
        btn.addEventListener('click', function () {
            this.disabled = 'true';
            var qi = setInterval(function () {
                if (t >= 0) {
                    btn.innerHTML = '还剩' + t + '秒可以再次发送';
                    t--;
                } else {
                    clearInterval(qi);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    t = 3;
                }
                // if (t == 0) {
                //     clearInterval(qi);
                //     btn.disabled = false;
                //     btn.innerHTML = '发送';
                //     t = 3;
                // } else {
                //     btn.innerHTML = '还剩' + t + '秒可以再次发送';
                //     t--;
                // }
            }, 1000)

        })

8,京东产品详情页放大镜效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            margin: 100px;
            width: 300px;
            height: 300px;
            border: 1px solid #333;

        }

        .box>img {
            width: 100%;
            height: 100%;
        }

        .box .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: yellow;
            opacity: 50%;
            cursor: move;
        }

        .box1 {
            display: none;
            position: absolute;
            left: 330px;
            top: 0;
            width: 540px;
            height: 540px;
            border: 1px solid #333;
            overflow: hidden;
        }

        .box1 img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="apple.png" alt="">
        <div class="box1">
            <img src="apple2.png" alt="">
        </div>
        <div class="mask"></div>
    </div>
    <script>
        var box = document.querySelector('.box');
        var box1 = document.querySelector('.box1');
        var mask = document.querySelector('.mask');
        var imgbig = box1.querySelector('img');

        box.addEventListener('mousemove', function (e) {
            box1.style.display = 'block';
            mask.style.display = 'block';
            var maskx = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
            var masky = e.pageY - box.offsetTop - mask.offsetHeight / 2;
            //避免mask走出box,所以设置mask.style.left（即maskx)设置范围,不能<0 和>200.
            if (maskx < 0) {
                maskx = 0;
            } else if (maskx > box.offsetWidth - mask.offsetWidth) {
                maskx = box.offsetWidth - mask.offsetWidth;
            }
            if (masky < 0) {
                masky = 0;
            } else if (masky > box.offsetHeight - mask.offsetHeight) {
                masky = box.offsetHeight - mask.offsetHeight;
            }
            mask.style.left = maskx + 'px';
            mask.style.top = masky + 'px';
            //大图的img的移动距离是和mask成比例的 即mask在box里走完全部距离（300-200）,imgbig要走800-540. 上下也一样。
            //注意大图的移动方向正好和mask相反，所以取负值，同时要给imgbig定位，这样才能获得imgbig.style.left等
            imgbig.style.left = -maskx * (imgbig.offsetWidth - box1.offsetWidth) / (box.offsetWidth - mask.offsetWidth) + 'px';
            imgbig.style.top = -masky * (imgbig.offsetHeight - box1.offsetHeight) / (box.offsetHeight - mask.offsetHeight) + 'px';
        })
        box.addEventListener('mouseleave', function () {
            box1.style.display = 'none';
            mask.style.display = 'none';
        })




    </script>
</body>

</html>

9,京东固定侧边栏 scroll

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .w {
            width: 900px;
            margin: 20px auto;
        }

        .header {

            height: 300px;
            background-color: pink;
        }

        .banner {

            height: 500px;
            background-color: purple;
        }

        .content {

            height: 1000px;
            background-color: blue;
        }

        .slider {
            position: absolute;
            top: 860px;
            right: 100px;
            width: 40px;
            height: 100px;
            background-color: pink;
        }

        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="header w">头部区域</div>
    <div class="banner w">导航区域</div>
    <div class="content w">主体区域</div>
    <div class="slider">
        <span>返回顶部</span>
    </div>
    <script>
        var slider = document.querySelector('.slider');
        var content = document.querySelector('.content');
        var span = document.querySelector('span');

        document.addEventListener('scroll', function () {

            if (window.pageYOffset > 810) {
                slider.style.position = 'fixed';
                slider.style.top = '50px';
                span.style.display = 'block';
            } else {
                slider.style.position = 'absolute';
                slider.style.top = '860px';
                span.style.display = 'none';
            }
        })
    </script>
</body>

</html>