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事件流
                事件捕获阶段 截或事件提供机会
                处于目标阶段 实际目标接到事件
    
  • 相关阅读:
    [BZOJ1492] [NOI2007]货币兑换Cash 斜率优化+cdq/平衡树维护凸包
    [BZOJ2638] 黑白染色
    [BZOJ2006] [NOI2010]超级钢琴 主席树+贪心+优先队列
    [BZOJ3698] XWW的难题 网络流
    [BZOJ2151] 种树 贪心
    js中的闭包理解一
    HTML5 input placeholder 颜色修改示例
    26 个 jQuery使用技巧
    JS原型与原型链(好文看三遍)
    文字和图片垂直居中
  • 原文地址:https://www.cnblogs.com/liuxiankun/p/8098308.html
Copyright © 2011-2022 走看看