zoukankan      html  css  js  c++  java
  • JS事件流(W3C与IE区别)

    一、JS事件的3个阶段:捕获、目标、冒泡,低版本IE不支持捕获阶段;

    二、在浏览器解析事件的时候,有两种触发方式:一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获)。
    冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时,依次它的父元素的click事件也被fire(触发),一直传递到最顶层的body元素为止。而捕获的触发方式正好相反,当某个元素的click事件被触发时,先从最顶层的body元素click事件被触发开始,一直传递到真正被触发的元素为止。

    1、W3C事件流:
    (1)从根文档(html)开始遍历所有子节点,如果目标事件的父节点设置为捕获时触发,则执行该事件,直到目标被执行,然后再事件冒泡(设置为捕获时触发的事件不再被执行)。
    (2)支持冒泡和捕获方法,并且可以在一个DOM上绑定多个事件处理器,各自不会冲突,
    (3)addEvntListener(removeEventListener)有三个参数:第一个-->事件类型;第二个-->处理函数,直接给函数名或函数体;第三个-->布尔值,表示是否支持捕获事件;
    (4)通过addEventListener和removeEventListener来实现函数的添加和删除。

    2、ie事件流:
    (1)从目标事件被执行,然后再冒泡父节点的事件,直到根文档;
    (2)只支持冒泡,并且可以在一个dom上绑定多个事件处理函数;
    (3)attachEvent(detachEvent)参数与W3C标准相同,注意:事件类型前+on;没有布尔参数;
    (4)通过attachevent和detachevent来实现函数的添加和删除。

    3、阻止某浏览器DOM元素的默认行为:
    (1)W3C通过调用e.preventDefault();
    (2)IE则通过window.event.returnValue=false;

    4、阻止冒泡事件:
    (1)W3C调用e.stopPropagation();或者 return false;
    (2)IE通过设置window.event.cancleBubble=true;

    5、 javascript 兼容W3c和IE的添加(取消)事件监听方法:

    //添加事件监听兼容函数  
        function addHandler(target, eventType, handler){  
            if(target.addEventListener){//主流浏览器  
                addHandler = function(target, eventType, handler){  
                    target.addEventListener(eventType, handler, false);  
                };  
            }else{//IE  
                addHandler = function(target, eventType, handler){  
                    target.attachEvent("on"+eventType, handler);  
                };        
            }  
            //执行新的函数  
            addHandler(target, eventType, handler);  
        }  
        //删除事件监听兼容函数  
        function removeHandler(target, eventType, handler){  
            if(target.removeEventListener){//主流浏览器  
                removeHandler = function(target, eventType, handler){  
                    target.removeEventListener(eventType, handler, false);  
                }         
            }else{//IE  
                removeHandler = function(target, eventType, handler){  
                    target.detachEvent("on"+eventType, handler);  
                }         
            }  
            //执行新的函数  
            removeHandler(target, eventType, handler);  
        }
    

    三、手写事件模型及事件代理、委托
    1、事件代理/委托的优缺点,是靠冒泡机制来实现的:
    优点:
    (1)可以减少大量内存占用,减少事件注册;
    (2)可以实现当新增子对象时,无需再对其绑定事件,对于动态内容部分更合适;
    缺点:如果所有事件都用事件代理,则可能会出现事件误判,即本不应该触发的对象绑上了事件。

  • 相关阅读:
    Java的学习笔记(二)
    Java的学习笔记
    简单界面生成
    登录界面
    播放器
    java计划
    求和
    修改后的抽奖系统
    第十周作业
    JAVA第五次作业
  • 原文地址:https://www.cnblogs.com/gaos/p/7767436.html
Copyright © 2011-2022 走看看