[DOM文档对象模型](事件流,事件委托,自定义属性 )

发布于：2023-01-24 ⋅ 阅读:(553) ⋅ 点赞:(0)

 

目录

事件流

1.事件捕获和事件冒泡

2. 阻止事件流动

3.🏆 两种注册事件的区别

4. 解绑事件

5.鼠标经过的两种写法的区别

6.🏆阻止默认行为方法

事件委托

自定义属性

事件流

 // 事件流指的是事件完整执行过程中的流动路径

// 说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

// 简单来说：

// 捕获阶段是 从父到子

//  冒泡阶段是从子到父

1.事件捕获和事件冒泡

        // 🏆事件捕获

        // 事件捕获概念：(相同事件)

        // 从DOM的根元素开始去执行对应的事件(从外到里)

        // 事件捕获需要写对应代码才能看到效果

        // 代码：

        // 事件源.addEventListener(事件,函数,是否捕获)

<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: #000;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #f00;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
    <script>
        // 🏆事件捕获
        // 事件捕获概念：(相同事件)
        // 从DOM的根元素开始去执行对应的事件(从外到里)
        // 事件捕获需要写对应代码才能看到效果
        // 代码：
        // 事件源.addEventListener(事件,函数,是否捕获)
         document.addEventListener('click', function () {
             console.log('我是爷')
        },true)
        document.querySelector('.father').addEventListener('click', function () {
           console.log('我是爹')

         },true)
       document.querySelector('.son').addEventListener('click', function () {
          console.log('我是儿')

        },true)

    </script>
</body>

</html>
标题

        // 说明：

        // addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）

        // 若传入false代表冒泡阶段触发，默认就是false

        // 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

      // 🏆事件冒泡

        // 事件冒泡概念:

        // 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

        // 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

        // 事件冒泡是默认存在的

<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: #000;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #f00;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
    <script>
        document.addEventListener('click', function () {
            console.log('我是爷')
        })
        document.querySelector('.father').addEventListener('click', function () {
            console.log('我是爹')

        })
        document.querySelector('.son').addEventListener('click', function () {
            console.log('我是儿')

        })
    </script>
</body>

</html>
标题

2. 阻止事件流动

            //🏆 阻止事件流动

            // 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

            // 若想把事件就限制在当前元素内，就需要阻止事件流动

            // 阻止事件流动需要拿到事件对象

            // 语法：


 

            // 事件对象.stopPropagation()

            // 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: #000;
            margin: 100px auto;
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin: 100px auto;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
            <a href="www.baidu.com">百度一下</a>
            <form action="index.js">
                <input type="text">
                <input type="submit" value="提交">
            </form>
        </div>

        <script>
            //🏆 阻止事件流动
            // 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
            // 若想把事件就限制在当前元素内，就需要阻止事件流动
            // 阻止事件流动需要拿到事件对象
            // 语法：


            // 事件对象.stopPropagation()

            // 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效


            document.addEventListener('click', function () {
                console.log('我是爷')
            })
            document.querySelector('.father').addEventListener('click', function () {
                console.log('我是爹')
            })
            document.querySelector('.son').addEventListener('click', function (e) {
                console.log('我是儿子')
                e.stopPropagation()//实现点击儿子,只弹出儿子,不弹出爹和爷//阻止传播

            })

        </script>
</body>

</html>
标题

3.🏆 两种注册事件的区别

        // 🏆 两种注册事件的区别：

        // 💎传统on注册（L0）

        // 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

        // 直接使用null覆盖偶就可以实现事件的解绑

        // 都是冒泡阶段执行的

        // 💎事件监听注册（L2）

        // 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)

        // 后面注册的事件不会覆盖前面注册的事件(同一个事件)

        // 可以通过第三个参数去确定是在冒泡或者捕获阶段执行

        // 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

        // 匿名函数无法被解绑

<!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>
</head>

<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button')

        btn.onclick = function () {
            console.log('1');
        }
        btn.onclick = function () {
            console.log('2');
        }
        同一对象同一事件,on来注册后面的会覆盖前面的

    </script>
</body>

</html>
标题 
<!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>
</head>

<body>
    <button>点击</button>
    <script>
        btn.addEventListener('click',
            function () {
                console.log('1');
            })
        btn.addEventListener('click',
            function () {
                console.log('2');
            })
        //用addEventListener后面注册的事件不会覆盖前面注册的事件(同一个事件)

    </script>
</body>

</html>

 

4. 解绑事件

     //   🏆on注册解绑

语法:DOM对象.on事件类型 = null

<!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>
</head>

<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        // 解绑事件
        //   🏆on注册解绑
        btn.onclick = function () {
            console.log('on监听我被点击了');
        }
        btn.onclick = null
    </script>
</body>

</html>

        //   🏆addEventListener注册解绑

        // 1.注册事件采用的 addEventLinstener(‘事件类型'，函数名）想要解绑事件的处理函数不能采用匿名函数只能使用具名函数（有名字的函数）

        // 2.需要解绑使用事件源.removeEventListener('事件类型'，函数名）

<!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>
</head>

<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        // 1.注册事件采用的 addEventLinstener(‘事件类型'，函数名）想要解绑事件的处理函数不能采用匿名函数只能使用具名函数（有名字的函数）
        // 2.需要解绑使用事件源.removeEventListener('事件类型'，函数名）
        function fn() {
            console.log('addEventListener我被点击了');
        }
        btn.addEventListener('click', fn)

        btn.removeEventListener('click', fn)
    </script>
</body>

</html>

5.鼠标经过的两种写法的区别

        // mouseover和mouseout会有冒泡效果

<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: #000;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #f00;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script>

        // mouseover和mouseout会有冒泡效果
    
        document.querySelector('.father').addEventListener('mouseover', function () {
            console.log('我是爹')

        })
        document.querySelector('.son').addEventListener('mouseover', function () {
            console.log('我是儿')

        })
 
    </script>
</body>

</html>
标题

         // mouseenter和mouseleave 没有冒泡效果

<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: #000;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #f00;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script>
        // mouseenter和mouseleave 没有冒泡效果
        document.querySelector('.father').addEventListener('mouseenter', function () {
            console.log('我是爹')

        })
        document.querySelector('.son').addEventListener('mouseenter', function () {
            console.log('我是儿')

        })
    </script>
</body>

</html>
标题

6.🏆阻止默认行为方法

            // 🏆阻止默认行为方法

            // 事件对象.preventDefault()

注意是给form表单注册事件而不是提交按

<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: #000;
            margin: 100px auto;
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin: 100px auto;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
            <a href="www.baidu.com">百度一下</a>
            <form action="index.js">
                <input type="text">
                <input type="submit" value="提交">
            </form>
        </div>

        <script>
            // 🏆阻止默认行为方法
            // 事件对象.preventDefault()
            document.querySelector('a').addEventListener('click', function (e) {
                e.preventDefault()

            })
            // 阻止表单提交
            // 注意是给form表单注册事件而不是提交按钮
            document.querySelector('form').addEventListener('submit', function (e) {
                alert('确认提交吗?')
                e.preventDefault()
            })
        </script>
</body>

</html>
标题

事件委托

        // 🏆事件委托是利用事件流的特征解决一些开发需求的知识技巧

        // 总结：

        // 优点：给父级元素加事件（可以提高性能）

        // 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发

        // 实现：事件对象.target 可以获得真正触发事件的元素

<!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>
        li {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <ul>
        <li> 第1个li</li>
        <li> 第2个li</li>
        <li> 第3个li</li>
        <li> 第4个li</li>
        <li> 第5个li</li>
        <li> 第6个li</li>
        <li> 第7个li</li>
        <li> 第8个li</li>
    </ul>
    <script>
        // 🏆事件委托是利用事件流的特征解决一些开发需求的知识技巧
        // 总结：
        // 优点：给父级元素加事件（可以提高性能）
        // 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
        // 实现：事件对象.target 可以获得真正触发事件的元素


        // 不要给每个li注册事件,给ul父亲添加事件
        document.querySelector('ul').addEventListener('click', function (e) {
            // 得到当前元素
            // 打印触发事件对象的标签名
            if (e.target.tagName === 'LI') {
                console.log(`${e.target.innerHTML}被点击了`);
                e.target.style.color = '#f00'
            }
            // 给点击的li改变颜色

        })
    </script>
</body>

</html>
标题

自定义属性

        // h5:在标签里面 以data-XXX='' 自定义属性

        //1. 获取dom对象

        // 2.对象.dataset-XXX

<!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>
</head>

<body>
    <div class="box" data-name="你好"></div>
    <script>
        // 自定义属性 
        // h5:在标签里面 以data-XXX='' 自定义属性
        //1. 获取dom对象
        // 2.对象.dataset-XXX
        const box = document.querySelector('.box')
        console.log(box.dataset.name);
    </script>
</body>

</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布