事件冒泡

简介: 事件冒泡

前言

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



总结



相关文章
|
6月前
事件代理和事件委托
事件代理和事件委托
53 6
|
6月前
什么是事件代理?什么事件委托?
什么是事件代理?什么事件委托?
47 0
|
19天前
|
JavaScript 前端开发 UED
事件冒泡
【10月更文挑战第29天】事件冒泡是 JavaScript 中一种强大的事件传播机制,理解和正确使用事件冒泡可以帮助开发者实现更加高效、灵活的网页交互效果。在实际开发中,需要根据具体的需求和场景,合理地利用事件冒泡,并注意处理可能出现的事件冲突和兼容性问题。
|
19天前
|
JavaScript 前端开发
事件委托
【10月更文挑战第29天】事件委托是JavaScript中一种重要的事件处理机制,它能够有效地提高事件处理的效率,减少内存占用,尤其适用于处理大量具有相似行为的DOM元素的事件。
|
19天前
|
JavaScript 前端开发 数据安全/隐私保护
事件捕获
【10月更文挑战第29天】事件捕获作为JavaScript中重要的事件传播机制之一,为开发者提供了一种在事件到达目标元素之前进行处理和控制的方式。通过合理地运用事件捕获,可以实现更灵活、更强大的事件处理逻辑,但同时也需要注意其兼容性、事件顺序和性能等方面的问题,以确保事件处理的正确性和高效性。
|
1月前
|
JavaScript 前端开发
事件冒泡和事件捕获的原理和区别
【10月更文挑战第15天】事件冒泡和事件捕获的原理和区别
|
2月前
|
JavaScript 前端开发 API
你真的理解事件绑定、事件冒泡和事件委托吗?
该文章详细解释了JavaScript中的事件绑定机制、事件冒泡行为以及事件委托技术,并通过实例帮助读者更好地理解和应用这些概念。
|
2月前
|
存储 JavaScript 前端开发
js事件冒泡和事件委托
事件冒泡是指事件从最内层元素开始逐级向上传播至祖先元素的过程,默认情况下,点击子元素时会先触发自身的事件处理程序,再依次向上触发父元素的处理程序。事件委托则是在父元素上设置事件处理程序,利用事件冒泡机制处理子元素的事件,以此减少内存消耗和提高性能,特别适用于处理大量动态子元素的情况。其区别在于事件冒泡是事件传播机制的一部分,而事件委托是编程技巧,通过在父元素上绑定事件处理程序来简化子元素的事件处理。
25 0
|
5月前
|
索引
事件委托是什么
事件委托是什么