事件冒泡

简介: 事件冒泡

前言

我是歌谣 我有个兄弟 巅峰的时候排名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>



总结



相关文章
|
5月前
事件代理和事件委托
事件代理和事件委托
42 6
|
5月前
什么是事件代理?什么事件委托?
什么是事件代理?什么事件委托?
40 0
|
6天前
|
JavaScript 前端开发 API
你真的理解事件绑定、事件冒泡和事件委托吗?
该文章详细解释了JavaScript中的事件绑定机制、事件冒泡行为以及事件委托技术,并通过实例帮助读者更好地理解和应用这些概念。
|
25天前
|
存储 JavaScript 前端开发
js事件冒泡和事件委托
事件冒泡是指事件从最内层元素开始逐级向上传播至祖先元素的过程,默认情况下,点击子元素时会先触发自身的事件处理程序,再依次向上触发父元素的处理程序。事件委托则是在父元素上设置事件处理程序,利用事件冒泡机制处理子元素的事件,以此减少内存消耗和提高性能,特别适用于处理大量动态子元素的情况。其区别在于事件冒泡是事件传播机制的一部分,而事件委托是编程技巧,通过在父元素上绑定事件处理程序来简化子元素的事件处理。
16 0
|
4月前
|
索引
事件委托是什么
事件委托是什么
|
5月前
|
JavaScript 前端开发
什么是事件代理?什么是事件委托?
什么是事件代理?什么是事件委托?
60 6
|
5月前
|
JavaScript
什么是事件冒泡?如何组织事件冒泡
什么是事件冒泡?如何组织事件冒泡
40 0
|
前端开发
事件委托
事件委托
58 0
|
JavaScript 前端开发
事件冒泡、事件捕获和事件委托
事件冒泡、事件捕获和事件委托
56 0