事件流事件冒泡和事件捕获

事件冒泡和事件捕获

他们是描述事件触发时序问题的术语。

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从外部到内部。
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从内部到外部

事件冒泡

<body>
  <div class="parent">
    <div class="son">
      <div class="grandson"></div>
    </div>

  </div>
  <script src="../report/js/jquery.min.js"></script>
  <script>
    $(‘.parent‘).click(function(){
      console.log(‘父‘)
    })
    $(‘.son‘).click(function(){
      console.log(‘子‘)
    })
    $(‘.grandson‘).click(function(){
      console.log(‘孙子‘)
    })
  </script>
</body>
</html>

事件冒泡父子都绑定了事件，点击子元素，会触发子元素绑定的事件；同时也会触发父元素绑定的事件

    // 当点击 parent不与son grandson相交区域              打印结果为  父
    // 当点击 parent与son相交 而不与grandson相交区域       打印结果为  子-父
    // 当点击 parent  son grandson 三者相交区域           打印结果为  孙子-子-父
    // 这是因为 事件的触发顺序自内向外，这就是事件冒泡。

    // 若是在grandson 加上阻止事件冒泡
    // $(‘.grandson‘).click(function(e){
    //   console.log(‘孙子‘)
    //   e.stopPropagation()
    // })
    // 此时当点击 parent  son grandson 三者相交区域        打印结果为  孙子
    // 因为 e.stopPropagation() 阻止了冒泡向 son grandson 触发事件

由于一些人会以为显示出来儿子在父亲里面的时候，自然点了儿子相当于点了父亲，所以这个例子我故意把两个盒子绝对定位在了两个不同的位置，所以点击事件给页面显示出来的位置是没关系的，而是跟html代码中的位置有关系。

使用绝对定位，把parent、son、grandson分别定位到互不重叠的地区，点击grandson 打印的结果依然为孙子-子-父

<body>
  <div class="parent" id="parent">
    <div class="son" id="son">
      <div class="grandson" id="grandson"></div>
    </div>

  </div>
  <script src="../report/js/jquery.min.js"></script>
  <script>

    // var parent = document.getElementsByClassName(‘parent‘)
    // var son=document.getElementsByClassName(‘son‘)
    // var grandson=document.getElementsByClassName(‘grandson‘)

    var parent = document.getElementById(‘parent‘)
    var son=document.getElementById(‘son‘)
    var grandson=document.getElementById(‘grandson‘)

    parent.addEventListener(‘click‘,function(){
      console.log(‘父‘)
    },false)
    son.addEventListener(‘click‘,function(){
      console.log(‘子‘)
    },false)
    grandson.addEventListener(‘click‘,function(){
      console.log(‘孙子‘)
    },false)
  </script>
</body>

使用事件监听默认为false是事件冒泡和jquey onclick一样也是默认事件冒泡

点击 grandson时，打印结果孙子-子-父

注意：

    var parent1 = document.getElementsByClassName(‘parent‘)
    console.log(parent1)
    // 打印结果：HTMLCollection [div#parent.parent, parent: div#parent.parent]

    var parent2 = document.getElementById(‘parent‘)
    console.log(parent2)
    // 打印结果：<div class=‘parent‘ id=‘parent‘>...</div>

    parent1.addEventListener(‘click‘,function(){
      console.log(‘结果1‘)
    },false)
    // 结果报错 Uncaught TypeError: parent1.addEventListener is not a function

    parent2.addEventListener(‘click‘,function(){
      console.log(‘结果2‘)
    },false)
    //使用getElementById能正确打印出结果2

使用jquey 和js 获取元素的不同

  <script>
    var parentid=$(‘#parent‘)
    console.log(parentid)
    // 打印结果 r.fn.init [div#parent.parent]

    var parentclass=$(‘.parent‘)
    console.log(parentclass)
    // 打印结果 r.fn.init [div#parent.parent, prevObject: r.fn.init(1)]

    var parent_js_id=document.getElementById(‘parent‘)
    console.log(parent_js_id)
    // 打印结果 <div class="parent" id="parent">....</div>

    var parent_js_class=document.getElementsByClassName(‘parent‘)
    console.log(parent_js_class)
    // 打印结果 HTMLCollection [div#parent.parent, parent: div#parent.parent]
  </script>

事件捕获

  <script>
    var parent = document.getElementById(‘parent‘)
    var son=document.getElementById(‘son‘)
    var grandson=document.getElementById(‘grandson‘)

    parent.addEventListener(‘click‘,function(){
      console.log(‘父‘)
    },true)
    son.addEventListener(‘click‘,function(){
      console.log(‘子‘)
    },true)
    grandson.addEventListener(‘click‘,function(){
      console.log(‘孙子‘)  

    },true)

    // 改为true时 ，使用的是事件捕获 由外向内
    // 点击  parent 时               打印结果 父
    // 点击  son 时                  打印结果 父-子
    // 点击  grandson时              打印结果 父-子-孙子

    // 也能使用e.stopPropagation()
    // parent.addEventListener(‘click‘,function(){
    //   console.log(‘父‘)
    // },true)
    // son.addEventListener(‘click‘,function(e){
    //   console.log(‘子‘)
    //   e.stopPropagation()
    // },true)
    // grandson.addEventListener(‘click‘,function(){
    //   console.log(‘孙子‘)  

    // },true)
    // 当点击 grandson时  不使用stopPropagation()    打印结果 父-子-孙子
    // 当点击 grandson时  使用stopPropagation()      打印结果 父-子
  </script>

return false

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

<body>
  <div class="parent" id="parent">
    <div class="son" id="son">
      <div class="grandson" id="grandson">
        <a id="click" href="https://baidu.com">点击</a>
      </div>
    </div>

  </div>
  <script src="../report/js/jquery.min.js"></script>
  <script>
    $(‘.parent‘).click(function(){
      console.log(‘父‘)
    })
    $(‘.son‘).click(function(){
      console.log(‘子‘)
    })
    $(‘.grandson‘).click(function(){
      console.log(‘孙子‘)
    })
    // jq
    $(‘#click‘).click(function(){
      console.log(‘jq点击‘)
      // 在jq中使用 return false  即阻止默认行为，又阻止冒泡
      return false
    })　　//和上面同样效果
    // $(‘#click‘).on(‘click‘,function(){
    //   console.log(‘点击‘)      打印结果  点击-孙子-子-父  不会执行a标签的跳转
    //   return false
    // })

    // js
    var a=document.getElementById(‘click‘)
    a.onclick=function(){
      console.log(‘点击‘)
      return false                 //打印结果  点击-孙子-子-父  不会执行a标签的跳转
    }
    // document.getElementById(‘click‘).addEventListener(‘click‘,function(){
    //   console.log(‘点击‘)
    //   return false             //打印结果   return false不执行 ？？？？？
    // })

  </script>

兼容不同浏览器的阻止事件冒泡和阻止默认行为

阻止事件冒泡

function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
    //因此它支持W3C的stopPropagation()方法
    e.stopPropagation();
else
    //否则，我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
}

阻止事件默认行为

//阻止浏览器的默认行为
function stopDefault( e ) {
    //阻止默认浏览器动作(W3C)
    if ( e && e.preventDefault )
        e.preventDefault();
    //IE中阻止函数器默认动作的方式
    else
        window.event.returnValue = false;
    return false;
}

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

事件注意点

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；
event对象只在事件发生的过程中才有效。

firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。

下面两句效果相同：

function a(e){
    var e = (e) ? e : ((window.event) ? window.event : null);
    var e = e || window.event; // firefox下window.event为null, IE下event为null
}

由于jq中已经封装好的代码，可以直接使用jq来兼容不同浏览器

绑定事件

事件绑定常用三种方法

1.嵌入到dom上

<body>
  <div onclick="btnOpen()">按钮</div>
  <script src="../report/js/jquery.min.js"></script>
  <script>
    function btnOpen(){
        alert(1)
    }
  </script>
</body>

ps 使用系统定义的关键字来为函数命名，无效。

<body>
  <div onclick="open()">按钮</div>
  <script src="../report/js/jquery.min.js"></script>
  <script>
    function open(){
        alert(1)
    }
  </script>
</body>

2.直接绑定

<body>
  <div id="btn">按钮</div>
  <script src="../report/js/jquery.min.js"></script>
  <script>
    document.getElementById(‘btn‘).onclick(function(){
      console.log(‘点击‘)
    })
  </script>
</body>

3.事件监听

<body>
  <div id="btn">按钮</div>
  <script src="../report/js/jquery.min.js"></script>
  <script>
    document.getElementById(‘btn‘).addEventListener(‘click‘,function(){
      console.log(‘按钮‘)
    })

  </script>
</body>

    // addEventListener(event, function, useCapture)
    //  event 事件名      function 事件触发执行的函数
    // useCapture 默认为false 事件在冒泡阶段执行    true 事件在捕获阶段执行

原文地址：https://www.cnblogs.com/zjx304/p/10032329.html

时间： 2024-07-29 15:27:58