事件冒泡;事件捕获; 触发顺序，先捕获，后冒泡;取消冒泡（封装取消冒泡的函数）；事件对象

男娘i 2023-06-02 09:08 4阅读 0赞

### 事件冒泡： ###

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，

即同一事件，自子元素冒泡向父元素。（自底向上）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 500px;
                height: 500px;
                background-color: red;
            }
    
            span {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    
            strong {
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <div>
            <span>
                <strong></strong>
            </span>
        </div>
    </body>
    <script>
        /*
          事件冒泡：
            结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，
            即同一事件，自子元素冒泡向父元素。（自底向上）
        */
        const div = document.getElementsByTagName('div')[0];
        const span = document.getElementsByTagName('span')[0];
        const strong = document.getElementsByTagName('strong')[0];
        div.addEventListener('click', () => {
            console.log('你触发到div标签了')
        }, false)
        span.addEventListener('click', () => {
            console.log('你触发到span标签了')
        }, false)
        strong.addEventListener('click', () => {
            console.log('你触发到strong标签了')
        }, false)
    </script>
    
    </html>

###  事件捕获： ###

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，

即同一事件，自父元素捕获子元素。（自顶向下）

IE没有捕获事件。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 500px;
                height: 500px;
                background-color: red;
            }
    
            span {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    
            strong {
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <div>
            <span>
                <strong></strong>
            </span>
        </div>
    </body>
    <script>
        /*
         事件捕获：
           结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，
           即同一事件，自父元素捕获子元素。（自顶向下）
           IE没有捕获事件。
       */
        const div = document.getElementsByTagName('div')[0];
        const span = document.getElementsByTagName('span')[0];
        const strong = document.getElementsByTagName('strong')[0];
        div.addEventListener('click', () => {
            console.log('你触发到div标签了')
        }, true)
        span.addEventListener('click', () => {
            console.log('你触发到span标签了')
        }, true)
        strong.addEventListener('click', () => {
            console.log('你触发到strong标签了')
        }, true)
    
    
    
    </script>
    
    </html>

### 触发顺序，先捕获，后冒泡 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 500px;
                height: 500px;
                background-color: red;
            }
    
            span {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    
            strong {
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div>
            <span>
                <strong></strong>
            </span>
    </div>
    </body>
    <script>
        /*
        触发顺序，先捕获，后冒泡
         */
        const div = document.getElementsByTagName('div')[0];
        const span = document.getElementsByTagName('span')[0];
        const strong = document.getElementsByTagName('strong')[0];
    
        div.addEventListener('click', () => {
            console.log('你触发到div标签了——捕获')
        }, true);
        span.addEventListener('click', () => {
            console.log('你触发到span标签了——捕获')
        }, true);
        strong.addEventListener('click', () => {
            console.log('你触发到strong标签了——捕获')
        }, true);
    
        div.addEventListener('click', () => {
            console.log('你触发到div标签了——冒泡')
        }, false);
        span.addEventListener('click', () => {
            console.log('你触发到span标签了——冒泡')
        }, false);
        strong.addEventListener('click', () => {
            console.log('你触发到strong标签了——冒泡')
        }, false);
    
    
    </script>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 500px;
                height: 500px;
                background-color: red;
            }
    
            span {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    
            strong {
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div>
            <span>
                <strong></strong>
            </span>
    </div>
    </body>
    <script>
        /*
        触发顺序，先捕获，后冒泡
         */
        const div = document.getElementsByTagName('div')[0];
        const span = document.getElementsByTagName('span')[0];
        const strong = document.getElementsByTagName('strong')[0];
    
        div.addEventListener('click', () => {
            console.log('你触发到div标签了——冒泡')
        }, false);
        span.addEventListener('click', () => {
            console.log('你触发到span标签了——冒泡')
        }, false);
        strong.addEventListener('click', () => {
            console.log('你触发到strong标签了——冒泡')
        }, false);
    
        div.addEventListener('click', () => {
            console.log('你触发到div标签了——捕获')
        }, true);
        span.addEventListener('click', () => {
            console.log('你触发到span标签了——捕获')
        }, true);
        strong.addEventListener('click', () => {
            console.log('你触发到strong标签了——捕获')
        }, true);
    
    </script>
    </html>

### 取消冒泡：       W3C标准event.stopPropagation()；但不支持IE9以下版本。       IE独有event.cancelBubble=true;但是谷歌浏览器现在也支持了。 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 500px;
                height: 500px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    <script>
        /*
        取消冒泡：
            W3C标准event.stopPropagation()；但不支持IE9以下版本。
            IE独有event.cancelBubble=true;但是谷歌浏览器现在也支持了。
         */
        document.onclick = function () {
            alert("触发到文档里面的点击事件了")
        };
        var div = document.getElementsByTagName('div')[0];
        div.onclick = function (e) {
            // e.stopPropagation();
            e.cancelBubble = true;
            this.style.backgroundColor = 'blue';
        };
    
        /*
        封装取消冒泡的函数stopBubble(event)
         */
        function stopBubble(event) {
            if (event.stopPropagation) {
                event.stopPropagation()
            } else {
                event.cancelBubble = true
            }
        }
    </script>
    </html>

### 事件对象 ###

event||window.event用于IE；
    事件源对象：
        event.target 火狐只有这个
        event.srcElement IE只有这个
        这俩chrome都有

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    </body>
    <script type="text/javascript">
        /*
        事件对象：
            event||window.event用于IE；
            事件源对象：
                event.target 火狐只有这个
                event.srcElement IE只有这个
                这俩chrome都有
         */
        var ul = document.getElementsByTagName('ul')[0];
        //事件源对象
        ul.onclick = function (event) {
            var event = event || window.event;
            var target = event.target || event.srcElement;
            console.log(target.innerText);
        }
    </script>
    </html>