JS中的DOM相关、事件绑定、事件委托、冒泡、捕获、阻止默认行为

关注

原创最新推荐文章于 2026-03-23 23:42:55 发布 930 阅读 AI 写同款· GEO 优化 ›

5.2 js的加载和 dom事件特性同步加载（默认）异步加载（asyncdefer加载行为阻塞 HTML 解析和渲染，直到脚本下载并执行完毕不阻塞 HTML 解析和渲染，脚本下载与页面解析并行进行执行时机下载完成后立即执行async：下载完成后立即执行defer：HTML 解析完成后按顺序执行执行顺序按照<script>标签在 HTML 中的顺序依次执行async：取决于下载完成的顺序defer：按照<script>标签的顺序适用场景适用于需要严格顺序执行且不介意阻塞页面加载的脚本。阅读详情

事件绑定

广义JavaScript：ECMAScript + DOM + BOM

狭义JavaScript：ECMAScript ES6 ES5 ES3


//事件绑定
document.getElementById('btn').onclick = function(){
    alert('dom0级事件，事件绑定！');
}//只执行最后一个事件

//事件监听
// element.addEventListener(event,function,useCapture)//removeEventListener()
// event 必传参数，事件名，支持所有DOM事件
// function 必传参数，指定要触发的函数
// useCapture 可选，事件的执行方式，true 捕获，false 冒泡，默认false冒泡
// IE8：element.attachEvent(event,function)
// event 必传参数，事件类型，需要加on，onclick
// function:指定事件触发时要执行的函数
document.getElementById('btn2').addEventListener("click",fun2);
document.getElementById('btn2').addEventListener("click",fun3);
function fun2(){
    alert("事件监听，首个事件");
}
function fun3(){
    alert("事件监听，第二个事件！");
}

阻止事件冒泡

e.stopPropagation();//Propagation蔓延

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="div1">
            div1
            <div id="div2">
                div2
            </div>
        </div>
    </body>
    <script>
        document.getElementById("div1")
        .addEventListener('click',function(e){
            alert("div1");
        },false);
        
        document.getElementById('div2')
        .addEventListener('click',function(e){
            e.stopPropagation();
            alert('div2');
        },false);
    </script>
</html>

IE:e.cancelBubble = true

事件委托

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
    <script>
        // 事件委托
        document.getElementById("demo")
        .addEventListener('click',function(e){
            var e = e || window.event;
            if(e.target.nodeName.toLowerCase() == 'li'){
                alert(e.target.innerHTML);
            }
        },false);
    </script>
</html>

阻止默认行为

e.preventDefault();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
    </body>
    <script>
        document.querySelector('a')
        .onclick = function(e){
            // e.preventDefault();
            return false;
        }
    </script>
</html>

收录于