事件流、事件冒泡、事件捕获、鼠标经过事件、 mouseover和mouseenter的区别、事件委托、阻止默认行为（阻止冒泡）、页面加载、滚动、尺寸

最新推荐文章于 2024-03-19 14:00:31 发布

初闻女人香

最新推荐文章于 2024-03-19 14:00:31 发布

阅读量445

点赞数 10

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_70251011/article/details/135672664

版权

事件流

分为捕获阶段和冒泡阶段
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    .son{
        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>
<body>
    <div class="father"></div>
    <div class="son"></div>

    
    <script>

        const fa = document.querySelector('.father')
        const son = document.querySelector('.son')
        document.addEventListener('click',function(){
            alert('我是爷')
        },true)
        document.addEventListener('click',function(){
            alert('我是爹')
        },true)
        document.addEventListener('click',function(){
            alert('我是儿')
        },true)

    </script>
</body>
</html>

请添加图片描述

阻止流动传播

请添加图片描述

    <script>

        const fa = document.querySelector('.father')
        const son = document.querySelector('.son')
        document.addEventListener('click',function(){
            alert('我是爷')
        },true)
        document.addEventListener('click',function(){
            alert('我是爹')
        },true)
        document.addEventListener('click',function(e){
            alert('我是儿')
            //阻止冒泡
            e.stopPropagation()
        },true)

    </script>

解绑事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        const btn = document.querySelector('button')
        btn.onclick = function(){
            alert('ok')
        }
        //L0 事件移除解绑
        btn.onclick = null
    </script>
</body>
</html>

在这里插入图片描述

 function fn(){
            alert('okk')
        }
        btn.addEventListener('click',fn)//添加
        btn.removeEventListener('click',fn)//移除

鼠标经过事件

在这里插入图片描述

mouseover和mouseenter的区别

mouseover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mouseover和mouseenter的区别</title>
</head>
<style>
    .dad{
        width: 400px;
        height: 400px;
        background-color: pink;
    }
    .baby{
        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>
<body>
    <div class="dad">
        <div class="baby"></div>
    </div>
    <script>
        const dad = document.querySelector('.dad')
        const baby = document.querySelector('.baby')
        
        dad.addEventListener('mouseover',function(){
            console.log('鼠标经过');
        })
        dad.addEventListener('mouseout',function(){
            console.log('鼠标移除');
        })
    </script>
</body>
</html>

注意：有BUG

mouseenter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mouseover和mouseenter的区别</title>
</head>
<style>
    .dad{
        width: 400px;
        height: 400px;
        background-color: pink;
    }
    .baby{
        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>
<body>
    <div class="dad">
        <div class="baby"></div>
    </div>
    <script>
        const dad = document.querySelector('.dad')
        const baby = document.querySelector('.baby')

        dad.addEventListener('mouseover',function(){
            console.log('鼠标经过');
        })
        dad.addEventListener('mouseleave',function(){
            console.log('鼠标移除');
        })
    </script>
</body>
</html>

在这里插入图片描述

事件委托

在这里插入图片描述
事件委托是利用事件流的特征，解决一些开发需求的知识技巧

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>我不需要变色</p>
    </ul>
    <script>
        //点击每个小li 当前li文字变红
        //按照事件委托的方式 写父级身上
        //获得父元素
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
        // alert('11')
            // this.style.color = 'pink'
            // e.target.style.color = 'red'
            if(e.target.tagName === 'LI'){
                e.target.style.color = 'red'
            }
        })
    </script>
</body>

</html>

阻止默认行为（阻止冒泡）

在这里插入图片描述

页面加载事件（load/DOMContentLoaded）

load

在这里插入图片描述

DOMContentLoaded

在这里插入图片描述

页面滚动事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
  <script>
    //页面滚动事件
    window.addEventListener('scroll',function(){
        console.log('我滚了');
    })
  </script>  
</body>
</html>