zoukankan      html  css  js  c++  java
  • 事件绑定与事件委托

    事件绑定:

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

    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)
    }
    }
    
    
  • 相关阅读:
    HTTP请求中的GET-POST方式
    拦截器与过滤器的不同点
    SQL练习题(一)
    Maven聚合工程安装时排除掉不参与本次安装的子工程
    codeforce 796C
    [CF1216E] Numerical Sequence hard version
    【floyd+矩阵乘法】POJ 3613 Cow Relays
    BZOJ 3573米特运输
    Poj 3977 Subset
    【树形dp】Bzoj 1040骑士
  • 原文地址:https://www.cnblogs.com/shouzi/p/8228887.html
Copyright © 2011-2022 走看看