事件冒泡、事件捕获、事件委托

总结： 当同一个Dom节点既注册了捕获阶段事件，又注册了冒泡阶段事件，会先执行捕获阶段事件后，后执行冒泡阶段事件。
 
事件捕获： 是指自上而下的顺序，从document开始执行事件到触发事件的Dom节点。
（初期：Netscape（网景）只使用事件捕获）
事件冒泡： 是指自下而上的顺序，从触发事件的Dom节点开始执行事件到document。
（初期：Internet Explorer只使用事件冒泡）
事件委托： 是指利用事件冒泡的机制，在触发事件的Dom节点的上层节点（如：父级节点）进行事件绑定委托上层节点进行事件处理，可以达到减少同一类型节点单个绑定事件时内存空间占用，并使当前类型节点可以动态添加减少不用额外添加或减少绑定事件。
 
EventTarget.addEventListener(type,listener,useCapture) 
将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
IE9之前使用 attachEvent 绑定事件兼容
注：第三个参数useCapture可以是一个options具体可以查看MDN
type： 监听事件类型字符串。（如： click， 注：不需要写 "on"）
listener： 监听事件类型触发时执行函数。
useCapture：表示监听事件类型触发条件，即在什么阶段触发。默认false，在冒泡阶段触发，当设置为true时，执行函数只在捕获阶段触发。
 
event.stopPropagation：阻止捕获和冒泡阶段当前事件进一步的传播。不能防止默认任何行为发生。
event.preventDefault： 如果此事件没有被显示处理，默认的动作也不执行，事件继续传播。即阻止事件默认行为，不能防止显示处理任何行为发生。
 
借用网上实例并修改部分，忘记是那个网址，见谅
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style>
        #outer{
            text-align: center;
            width: 400px;
            height: 400px;
            background-color: #ccc;
            margin: 0 auto;
        }
        #middle{
            width: 250px;
            height: 250px;
            background-color: #f00;
            margin: 0 auto;
        }
        #inner{
            width: 100px;
            height: 100px;
            background-color: #0f0;
            margin: 0 auto;
            border-rad
        }
    </style>
</head>
<body>
    <div id='outer'>
        <span>outer</span>
        <div id='middle'>
            <span>middle</span>
            <div id='inner'>
                <span>inner</span>
            </div>
        </div>
    </div>
    <script>
        function $(element){
            return document.getElementById(element);
        }
        function on(element,event_name,handler,use_capture){
            console.log('只执行一次判断')
            if(addEventListener){
                on = function(element,event_name,handler,use_capture){
                    console.log('直接执行addEventListener')
                    $(element).addEventListener(event_name,handler,use_capture);    
                }
            }else{
                 on = function(element,event_name,handler,use_capture){
                    console.log('直接执行addEventListener')
                    $(element).attachEvent('on'+event_name,handler);
                }
            }
        }

        on("outer","click",o_click_c,true);
        on("middle","click",m_click_c,true);
        on("inner","click",i_click_c,true);

        on("outer","click",o_click_b,false);
        on("middle","click",m_click_b,false);
        on("inner","click",i_click_b,false);
        
        function o_click_c(){
            console.log("outer_捕获")
        }
        function m_click_c(e){
            e.preventDefault()
            console.log("middle_捕获")
        }
        function i_click_c(){
            console.log("inner_捕获")
        }
        function o_click_b(){
            console.log("outer_冒泡")
        }
        function m_click_b(e){
            e.stopPropagation()
            console.log("middle_冒泡")
        }
        function i_click_b(){
            console.log("inner_冒泡")
        }
    </script>
</body>
</html>
// 输出
// a.html:63 outer_捕获
// a.html:67 middle_捕获
// a.html:70 inner_捕获
// a.html:80 inner_冒泡
// a.html:77 middle_冒泡

 

 

posted @ 2021-04-16 16:46  tianzhongshan  阅读(720)  评论(0)    收藏  举报