ES5-03 事件监听 - 委托(捕获与冒泡)

最新推荐文章于 2022-05-06 15:55:05 发布

i'm_zhangting

最新推荐文章于 2022-05-06 15:55:05 发布

阅读量147

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42549581/article/details/103239785

版权

JavaScript 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

document.addEventListener(“click”, function(e){},true);
第三个参数有两个值（true：捕获 false：冒泡），默认为false；
捕获：从外向内逐级触发；
冒泡：从内向外逐级触发；
阻止事件冒泡：e.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #wrapDiv, #innerP, #textSpan{
        margin: 5px;padding: 5px;box-sizing: border-box;cursor: default;
    }
    #wrapDiv{
        width: 300px;height: 300px;border: indianred 3px solid;
    }
    #innerP{
        width: 200px;height: 200px;border: hotpink 3px solid;
    }
    #textSpan{
        display: block;width: 100px;height: 100px;border: orange 3px solid;
    }
    </style>
</head>
<body>
     <div id="wrapDiv">wrapDiv
        <p id="innerP">innerP
            <span id="textSpan">textSpan</span>
        </p>
    </div>

    <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");
 
    //绑定监听事件
    // function addEventHandler(target,type,fn,kind){
    //     var kindO = kind ? kind :false; //默认是冒泡
    //     if(target.addEventListener){
    //         target.addEventListener(type,fn,kindO);
    //     }else{
    //         // ie8以下
    //         target.attachEvent("on"+type,fn);
    //     }
    // }

    // addEventHandler(window,'click',function(e){
    //     console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    // }, true)

    // 捕获阶段绑定事件
    //window > document >  document.documentElement > document.body> 
    //  wrapDiv>  innerP > textSpan
    
    // window.addEventListener("click", function(e){
    //     console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    // }, true);
 
    // document.addEventListener("click", function(e){
    //     console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    // }, true);
 
    // document.documentElement.addEventListener("click", function(e){
    //     console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    // }, true);
 
    // document.body.addEventListener("click", function(e){
    //     console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    // }, true);
 
    // wrapDiv.addEventListener("click", function(e){
    //     console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    // }, true);
 
    // innerP.addEventListener("click", function(e){
    //     console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    // }, true);
 
    // textSpan.addEventListener("click", function(e){
    //     console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    // }, true);
 

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
 
    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
 
    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
 
    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
 
    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
 
    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
 
    textSpan.addEventListener("click", function(e){
        e.stopPropagation();
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
    
</script>
</body>
</html>

移除监听事件兼容IE8

var dom = document.getElementById("#dom");
var fun1 = function(){
	console.log("fun1")
}
//事件监听
dom.addEventListener("click",fun1);
//事件移除
dom.removeEventListener("click",fun1);
//ie6~ie8
dom.attchEvent("onclick",fun1);

i'm_zhangting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES5-03 事件监听 - 委托(捕获与冒泡)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrapDiv, #innerP, #textSpan{ ...
复制链接

扫一扫