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

原创于 2024-01-02 10:10:16 发布 · 890 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript学习笔记专栏收录该内容

32 篇文章

订阅专栏

本文介绍了JavaScript中DOM操作的关键概念，包括事件绑定的使用，如何实现事件的捕获和冒泡，以及阻止事件冒泡和阻止默认行为的方法。同时，还讲解了事件委托在处理大量动态生成的元素时的优势。

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

事件绑定

广义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>