首页 > 代码库 > DOM 事件冒泡

DOM 事件冒泡

1.什么是事件冒泡?

  事件冒泡就是从具体到不具体,

  例如:当你给了一个button按钮一个点击事件,再给他的父级相同的事件,就会按照,button,body,document,window,继续向上冒泡。

2。什么是事件捕获?

  从不具体到具体,跟事件冒泡刚好相反。window document body button 。

  例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById(btn);

            oBtn.setCapture();
            oBtn.onclick = function(){
                alert(1);
            }
        }
    </script>
</head>
<body>
<input type="button" value=http://www.mamicode.com/"按钮" id="btn">
</body>
</html>

3.Dom事件流包括三个阶段。

  1.>事件捕获阶段

  2.>处于目标阶段

  3.>事件冒泡阶段

4.事件捕获阶段

  window.addEventListener(‘click‘,function(){

  

     },true)

为true代表事件使用事件捕获模式,false则代表使用事件冒泡

5.阻止事件冒泡    stopPropagation()

  

      

DOM 事件冒泡