事件冒泡

简介: 事件冒泡

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语

事件冒泡




编辑


代码部分

<body>
        <!-- 开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。 -->
  <div class="father">
    <div class="son">son</div>
  </div>
  <script>
    // 常见事件对象的属性和方法
    // 阻止冒泡  dom 推荐的标准 stopPropagation()
    var son = document.querySelector('.son')
    son.addEventListener(
    'click',
    function (e) {
      console.log('son')
      e.stopPropagation() // stop 停止  Propagation 传播
      e.cancelBubble = true // 非标准 cancel 取消 bubble 泡泡
    },
    false
    )
    var father = document.querySelector('.father')
    father.addEventListener(
    'click',
    function () {
      console.log('father')
    },
    false
    )
    document.addEventListener('click', function () {
    console.log('document')
    })
            //只打印出son
  </script>
  </body>



总结



相关文章
|
24天前
事件代理和事件委托
事件代理和事件委托
18 6
|
25天前
什么是事件代理?什么事件委托?
什么是事件代理?什么事件委托?
13 0
|
2天前
|
JavaScript 前端开发
什么是事件代理?什么是事件委托?
什么是事件代理?什么是事件委托?
15 6
|
3月前
|
JavaScript
什么是事件冒泡?如何组织事件冒泡
什么是事件冒泡?如何组织事件冒泡
22 0
|
8月前
|
前端开发
事件委托
事件委托
48 0
|
9月前
|
JavaScript 前端开发
事件冒泡、事件捕获和事件委托
事件冒泡、事件捕获和事件委托
43 0
|
JavaScript 前端开发 API
你真的理解事件绑定、事件冒泡和事件委托吗?
事件,是JS Web API比较重要的一个知识点。我们平常所看到的网页,肯多内容都要用到事件。比如说一个点击、一个下拉、一个滚动,都要用到事件进行操作。
你真的理解事件绑定、事件冒泡和事件委托吗?
|
JavaScript
事件流、事件捕获和事件冒泡的介绍
事件流、事件捕获和事件冒泡的介绍
107 0