• 事件绑定与事件委托


    事件绑定:

    为什么要用到事件绑定? 我的理解是同一个对象无法添加多个事件?如果添加多个事件的话按照执行顺序来说下边的事件会把上面的替换;就像以下代码:

    var oDiv = document.getElementById("div1");
    oDiv.onclick = function(){
    alert(1);
    }
    oDiv.onclick = function(){
    alert(2);
    }
    只会弹出2 ;
    我们想要都弹出怎么办?
    var f1 = function(){
    alert(1);
    };
    var f2 = function(){
    alert(2);
    }
    oDiv.addEventListener("click",f1);
    oDiv.addEventListener("click",f2);
      oDiv.attachEvent("onclick",f1);
    oDiv.attachEvent("onclick",f2);
    就可以这么写
    为什么这么写了四个 因为有兼容性 下边的是为了兼容ie
    所以综合写法:添加事件
    function addEvent (ele,type,fun){
    if(ele.addEventListener){
    ele.addEventListener(type,fun);

    }else{
    ele.attachEvent("on"+type,fun);

    }
    }
    移除事件:
    function removeEvent (ele,type,fun){
    if(ele.removeEventListener){
    ele.removeEventListener(type,fun);

    }else{
    ele.detachEvent("on"+type,fun);

    }
    }
    注意事项:1.事件的兼容 2.事件是否有on;
    事件委托:原因新增对象无法添加事件:可以委托给其父元素常用案例(取快递事件)
    <body>
    <div>
    </div>
    <input type="button" value="添加">
    </body>
    <script>
    var oDiv=document.getElementsByTagName("div")[0];
    var oBtn=document.getElementsByTagName("input")[0];
    var num=0;
    oBtn.onclick=function () {
    var oUl=document.createElement("ul");
    num++;
    var oLI=document.createElement("li");
    oLI.innerHTML=num+"我是创建的li";
    oUl.appendChild(oLI);
    oDiv.appendChild(oUl)
    };
    oDiv.onclick=function (ev) {
    var oEvent=window.event||ev; 事件获取的兼容
    var target=oEvent.target||oEvent.srcElement; target 事件源的兼容
    if(target.nodeName.toLowerCase()=="li"){判断是否是事件源
    alert(target.innerHTML)
    }
    }
    
    
  • 相关阅读:
    【亲身测试成功】windows7 32位操作系统 环境下安装 windows7 64位操作系统
    Deprecated: Function ereg_replace() is deprecated in ……【解决方法】
    20100526(开始上班咯···)
    20100608
    String与string的区别
    Jquery CheckBox全选方法
    与技术无关
    jquery之对象访问(是不是API里出错了呢?)
    工作四个月之后的小感
    关于数据库中的AK(Alternate Key)
  • 原文地址:https://www.cnblogs.com/shouzi/p/8228887.html
Copyright © 2020-2023  润新知