zoukankan      html  css  js  c++  java
  • 跨浏览器事件处理

    我是inner
    IE的事件流是事件冒泡
                传播顺序
                div
                body
                html
                document
    
                IE9 FF Chrome safari将事件冒泡到window
    
            addEventListener(type, handler, boolean)
                type 为click load mouseover
                boolean true  事件捕获 在事件捕获阶段调用事件处理程序  body > wrap > inner
                        false 事件冒泡 在事件冒泡阶段调用事件处理程序  inner > wrap > body
    
                handler 事件处理程序 也就是事件函数
    
    
            removeEventListener(type, handler, boolean)
                handler 必须是与addEventListener中的函数是同一个函数(不能是内容相同的匿名函数 因为是指向两个内存区的代码结构相同的函数)
            //支持IE9 以上
    
    
            attachEvent(type, handler)
                type onclick onmouseover 
                handler 同上
                
            detachEvent(type, handler)
                type onclick onmouseover 
                handler 匿名函数 解绑无效
            //ie opera 专属


    var utilEvent = {
                addHandler: function (ele, type, handler) {
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, true);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on" + type, handler)
                    }else{
                        ele["on" + type ] = handler;
                    }
                },
                removeHandler: function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, true)
                    }else if(ele.detach){
                        ele.detach("on" + type, handler)
                    }else{
                        ele["on" + type] = null;
                    }
                }
            } 
    
            var wrap = document.querySelector(".wrap");
            var inner = document.querySelector(".inner");
    
            function bubble_body(){
                alert("body is click");
            }
            function bubble_wrap(){
                alert("wrap is click");
            }
            function bubble_inner(){
                alert("inner is click");
            }
            utilEvent.addHandler(document.body, "click", bubble_body)
            utilEvent.addHandler(wrap, "click", bubble_wrap)
            utilEvent.addHandler(inner, "click", bubble_inner)
    

      

    事件冒泡
                触发由最具体的元素开始(嵌套最深的元素)接收 然后再逐级向上传播
                
                IE5.5及更早版本 事件冒泡会跳过html元素 
                IE9则将事件一直冒泡到window
    
            事件补捕获
                触发由最不具体的元素开始(document)接受 然后像内部传递
    
    
            DOM事件流
                事件捕获阶段 截或事件提供机会
                处于目标阶段 实际目标接到事件
    
  • 相关阅读:
    [Linux]Linux常用命令: zip/unzip 压缩和解压缩命令
    [ORACLE] REHL7.5 下oracle 19.3 安装
    [ORACLE] oracle table export exp/imp
    [linux] linux信号
    [SAP HANA]SAP HANA 内存管理详解
    [SAP HANA]SAP HANA的系统限制
    [SAP HANA]SAP HANA的组件
    [SAP HANA] SAP HANA的架构
    [SAP HANA] 如何设定HANA数据库存的类型 生产/测试/开发/定制
    [SAP HANA] SAP HANA连接不上, 连接超限 保留管理员连接
  • 原文地址:https://www.cnblogs.com/liuxiankun/p/8098308.html
Copyright © 2011-2022 走看看