zoukankan      html  css  js  c++  java
  • [JS学习笔记]浅谈Javascript事件模型

    DOM0级事件模型

    element.on[type] = function(){}
    兼容性:全部支持
     
    lay1
    lay2
    lay3
    • e.target:直接触发事件的元素[IE8及以下不支持taget属性,使用e.srcElement代替]
    • e.srcElement:直接触发事件的元素[FF不支持srcElement属性,使用e.target代替]
    • e.currentTarget:绑定事件的元素[IE8及以下不支持currentTarget属性,使用this代替]
    • this:同e.currentTarget[所有浏览器通用]

    DOM2级事件模型

    attachEvent
    兼容性:IE5-IE10支持,IE11不支持,ff不支持
     
    lay1
    lay2
    lay3
    • 对于支持的浏览器
    • e.target:不支持该属性
    • e.srcElement:直接触发事件的元素
    • e.currentTarget:不支持该属性
    • this:始终指向window,可以使用call/apply改变this指向
      element.attachEvent("on"+type,function(){ handler.apply(element,arguments); })

    DOM2级事件模型

    addEventListener
    兼容性:IE5-IE8不支持,IE9-IE11支持,ff支持
     
    lay1
    lay2
    lay3
    • 对于支持的浏览器
    • e.target:直接触发事件的元素
    • e.srcElement:不支持该属性
    • e.currentTarget:绑定事件的元素
    • this:同e.currentTarget
     $(function(){           //dom0级事件绑定
                var eleArr_d1 = $.makeArray($(".demo1").find(".layer1,.layer2,.layer3"));
                $.each(eleArr_d1, function (i, o) {
                    o.onclick = fn0;
                });
    
                function fn0(e) {
                    e = e || window.event;
                    console.log("e.target=", getName(e.target));
                    console.log("e.srcElement=", getName(e.srcElement));
                    console.log("e.currentTarget=", getName(e.currentTarget));
                    console.log("this=", getName(this));
                    console.log("========================================================");
                }
    
                //dom2级事件绑定[IE]
                var eleArr_d2 = $.makeArray($(".demo2").find(".layer1,.layer2,.layer3"));
                if (document.attachEvent) {
                    $.each(eleArr_d2, function(i, o) {
                        o.attachEvent("onclick", function() { fn2_ie.apply(o,arguments); });//改变this指向
                    });
                } else {
                    $(".demo2").find(".error").text("当前浏览器不支持attachEvent").show().css({ display: "inline-block" });
                }
    
    
                function fn2_ie(e) {
                    e = e || window.event;
                    console.log("e.target=", getName(e.target));
                    console.log("e.srcElement=", getName(e.srcElement));
                    console.log("e.currentTarget=", getName(e.currentTarget));
                    console.log("this=", getName(this));
                    console.log("========================================================");
                }
    
    
                //dom2级事件绑定[FF]
                var eleArr_d3 = $.makeArray($(".demo3").find(".layer1,.layer2,.layer3"));
                if (document.addEventListener) {
                    $.each(eleArr_d3, function(i, o) {
                        if (o.addEventListener) o.addEventListener("click", fn3_ff, false);
                    });
                } else {
                    $(".demo3").find(".error").text("当前浏览器不支持addEventListener").css({display:"inline-block"});
                }
    
                function fn3_ff(e) {
                    e = e || window.event;
                    console.log("e.target=", getName(e.target));
                    console.log("e.srcElement=", getName(e.srcElement));
                    console.log("e.currentTarget=", getName(e.currentTarget));
                    console.log("this=", getName(this));
                    console.log("========================================================");
                }
    
    
    
                function getName(ele) {
                    if (ele==null) {
                        return ele;
                    }else if (ele.className) {
                        return ele.className;
                    } else if (ele.tagName) {
                        return ele.tagName;
                    }else if (ele.nodeName) {
                        return ele.nodeName;
                    } else {
                        return ele;
                    }
                }
    
    })
    
    
  • 相关阅读:
    android头像更换(实现拍照和从手机图片里选择两种形式)
    安卓开发实战-记账本APP(六)
    安卓开发实战-记账本APP(五)
    安卓开发实战-记账本APP(四)
    安卓开发实战-记账本APP(三)
    BaseAdapter的三种表达式分析,startActivityForResult的使用
    使用Bundle在Activity之间交换数据
    深入理解JVM-类加载器深入解析(3)
    深入理解java内存模型--读书笔记
    深入理解JVM-类加载器深入解析(2)
  • 原文地址:https://www.cnblogs.com/hyaaon/p/4623613.html
Copyright © 2011-2022 走看看