为了账号安全,请及时绑定邮箱和手机立即绑定

事件冒泡和捕获的问题。

事件冒泡和捕获的问题。

阿晨1998 2018-12-11 17:19:31
请问大神们,我在最外层div加个点击事件,里面放个a标签,点击a标签也可以产生冒泡到外层div?是因为它属于外层div的原因么?难道不是需要两个都绑定事件,里层才能冒泡到最外面来么?那么反之事件捕获呢? 小白不太理解。。。
查看完整描述

1 回答

?
一只名叫tom的猫

TA贡献1906条经验 获得超3个赞

请问大神们,我在最外层div加个点击事件,里面放个a标签,点击a标签也可以产生冒泡到外层div?

是的。

是因为它属于外层div的原因么?

因为在结构上,它们是有层级关系的(父子关系)。

难道不是需要两个都绑定事件,里层才能冒泡到最外面来么?

不是。

那么反之事件捕获呢? 小白不太理解。。。

一样的。

理解的时候,注意想明白,节点范围的“大小”就行了,事件触发一定是不能跳过“大”节点的嘛。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>事件</title>

<link rel="stylesheet" type="text/css" href="" />

</head>

<body>


  <div id="out" style="background-color: yellow;">

    <div id="middle" style="background-color: red; width: 50%;">

      <a href="#" id="inner" style="background-color: green;">里面的东西</a>

    </div>

  </div>


  <script type="text/javascript">

    // 下传, 捕捉

    document.getElementById('out').addEventListener('click', function(e){

      console.log('1');

    }, true);


    // 上浮, 冒泡

    document.getElementById('out').addEventListener('click', function(e){

      console.log('2');

    }, false);

  </script>


</body>

</html>


查看完整回答
反对 回复 2019-01-09
  • 1 回答
  • 0 关注
  • 428 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信