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)
    }
    }
    
    
  • 相关阅读:
    css 笔记
    解决谷歌浏览器中的input背景色默认是黄色
    lunbo
    操作json进行分组再组
    点击返回顶部
    关于有的手机浏览器下载APK时会成TXT
    火狐浏览器jsonshow插件
    微信web开发者工具
    浏览器UA
    click多次注册事件会导致一个事件被触发多次的解决方法
  • 原文地址:https://www.cnblogs.com/shouzi/p/8228887.html
Copyright © 2011-2022 走看看