事件传播行为

黄酱！

于 2021-12-09 19:59:26 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/tianranran/article/details/121842669

JS 专栏收录该内容

91 篇文章

订阅专栏

本文介绍了JavaScript中的事件冒泡和捕获机制，以及如何通过addEventListener的第三个参数控制它们。同时，讨论了如何使用e.preventDefault()阻止事件的默认行为，例如在点击超链接时不跳转。此外，还提及了自执行函数的概念及其用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 
        由内向外：事件冒泡
        由外向内: 事件捕获

        点击元素： 事件目标对象

        addEventListener的第三个参数决定了是事件捕获还是事件冒泡
           addEventListener(事件类型，事件处理函数,捕获true|冒泡false)
              => 默认冒泡false,可以不写

     -->

默认行为

<title>默认行为</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>

    <script>
        var aEle = document.querySelector('a')
        aEle.addEventListener('click',function(e){
            e = e || window.event
            e.preventDefault() //阻止默认行为
            alert后 不跳转

            alert('超链接默认行为')
        })

自执行函数

 <!-- 
        创建函数:
           声明式
            function 函数名(){}
            函数名()
           赋值式
             var 函数名 = function(){}
             函数名()

           自执行函数
             函数定义和执行写在一起
             
             (function(){
                 //函数执行代码
             })()
             
     -->
</head>
<body>
    <script>
        
        (function(){
            console.log('自执行函数>>>>>');
        })()