阻止事件默认行为和防抖节流的使用

最新推荐文章于 2024-05-30 11:21:03 发布

Detectiveboy

最新推荐文章于 2024-05-30 11:21:03 发布

阅读量377

点赞数

分类专栏：笔记文章标签： javascript html

本文链接：https://blog.csdn.net/Detectiveboy/article/details/122990914

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

阻止事件默认行为

事件默认行为有两种：捕获和冒泡。捕获行为是从最不精确的元素到最精确的元素；通俗点说就
是有一个父元素div，div里有一个a链接，div是最不精确的元素，而a链接是最精确的元素，
现在我在div上面绑定一个点击事件，同时a链接也绑定点击事件，当两者重叠，父元素层叠
等级比a链接高时；当你去触发div上的点击事件是，你会发现a链接的点击事件同时也被触发了，
这就是事件的捕获。冒泡正好和捕获相反，是从最精确的元素到最不精确的元素，道理相同。

防抖和节流的介绍我就不过多说了，可以看其他博客的，这里我还是直接copy代码吧！

<!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>阻止事件默认行为和防抖节流的使用</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .link {
            text-decoration: none;
            color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <a class="link" href="javascript:;">
            链接
        </a>
    </div>
    <div class="jieliu">
        <span>节流</span>
        <button>提交</button>
    </div>
    <div class="fangdou">
        <span>防抖</span>
        <input type="text" class="search" />
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        //事件的冒泡和捕获行为
        let box = document.querySelector('.box')
        let a = document.querySelector('.link')
        box.onclick = function (e) {
            //阻止事件捕获
            // e.preventDefault();
            console.log('box被点击了')
        }
        a.onclick = function (e) {
            //阻止事件冒泡
            e.stopPropagation();
            console.log('a被点击了')
        }
        //------------------------------------------------
        //节流使用
        let submit = document.querySelector('button');

        function jieliu(fn, delay) {
            let lastTime = 0;
            return function () {
                let nowTime = new Date().getTime()
                if (nowTime - lastTime > delay) {
                    fn();
                    lastTime = nowTime
                }
            }
        }
        submit.onclick = jieliu(function () {
            let timer = null;
            timer = setTimeout(function () {
                console.log('发送请求')
                clearTimeout(timer)
            }, 1000)
        }, 3000)
        //------------------------------------------------
        //防抖使用
        let input = document.querySelector('.search')

        function fangdou(fn, delay) {
            let timer = null;
            return function () {
                clearTimeout(timer)
                timer = setTimeout(function () {
                    fn()
                }, delay)
            }
        }
        input.oninput = fangdou(function () {
            console.log(input.value)
        }, 2000)

    }
</script>

</html>