JS 事件流（事件捕获，冒泡）

• 事件对象：是指事件在触发过程中所发生的所有事情的集合

• 事件流：事件的传递过程，分为三个阶段
  1.事件捕获阶段
  2.目标阶段
  3.事件冒泡阶段

  先执行事件捕获 -> 目标元素 -> 最后事件冒泡

  • 事件捕获：
    事件从根元素开始触发，逐级向子元素传递的过程，我们就叫它为事件捕获过程

  • 事件冒泡：
    事件从当前的触发元素开始逐级向父级传递的过程，我们就叫它为事件冒泡过程

现在所有的主流浏览器都是在事件冒泡过程中触发事件的。

mouseover在事件冒泡阶段

//mouseover在事件冒泡阶段
        <div class="web">
            <ul>
                <li>我是第1个li</li>
                <li>我是第2个li</li>
                <li onclick="changeColor(this)">我是第3个li</li>
                <li>我是第4个li
                    <input type="button" value="赞"/>            
                </li>
                <li>
                    我是第5个li
                    <button>赞</button>
                </li>
            </ul>
        </div>

            ali[4].addEventListener('mouseover',function(){
                this.style.background = 'skyblue';
                console.log('我是mouseover事件，父元素');
            })

            btn.addEventListener('mouseover',function(){
                this.style.background = "pink";
                console.log('我是mouseover事件，子元素');
            });

输出结果.jpg

addEventListener()传入第三个参数(true)可让事件再捕获阶段触发

• addEventListener(eventType,callback,boolean)
  • eventType:事件类型
  • callback:回调函数
  • boolean：(可选)布尔值，true：指定事件在捕获阶段触发，false默认值

以上面的mouseover为例

            ali[4].addEventListener('mouseover',function(){
                this.style.background = 'skyblue';
                console.log('我是mouseover事件，父元素');
            },true)

            btn.addEventListener('mouseover',function(){
                this.style.background = "pink";
                console.log('我是mouseover事件，子元素');
            });

输出结果.jpg

mouseenter在事件捕获阶段触发

            //mouseenter在事件捕获阶段触发
            ali[3].addEventListener('mouseenter',function(){
                console.log('我是mouseenter事件，父元素');
                
            })
            ali[3].addEventListener('mouseleave',function(){
                console.log('我是mouseleave事件');
            })
            var inp = document.querySelector('input');
            inp.addEventListener('mouseenter',function(){
                console.log('我是mouseenter事件，子元素');
            })

输出结果.jpg

.stopPropagation()阻止事件冒泡

当父子元素都有点击事件时，点击子元素，父元素也会触发点击事件，可通过stopPropagation()阻止事件冒泡，点击子元素时父元素不会出发。

            ali[4].addEventListener('click',function(){
                this.style.fontSize = '30px';
                console.log('我是父元素中的点击事件');
            })
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(e){
                e.stopPropagation();//阻止事件冒泡
                this.style.color='red';
                console.log('我是子元素中的点击事件');
            })