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

    事件委托主要解决事件处理程序过多的问题,利用了事件冒泡

     <ul id="mylinks">
        <li id="gosomewhere">gosomewhere</li>
        <li id="dosomething">dosomething</li>
        <li id="sayhi">hi</li>
     </ul>
    

     传统模式需要添加三个点击事件

     var item1 = document.getElementByID("gosomewhere");
    
     var item2 = document.getElementByID("dosomething");
    
     var item2 = document.getElementByID("sayhi");
    
       EventUtil.addHandler(item1,"click",function(event){
    
        loaction.href = "www.baidu.com"
    
     })
    
     EventUtil.addHandler(item2,"click",function(event){
    
        document.title = 'i am a new title';
    
      })
    
     EventUtil.addHandler(item3,"click",function(event){
    
        alert('hi');
    
      })
    

      如果是一个复杂的web程序,对每一个可单击的DOM元素都写一个点击事件,会产生很多代码,事件委托只需要在尽量最高的层次上添加一个点击事件

    var link= document.getElementByID("mylinks");
    EventUtil.addHandler(link,"click",function(event){    
        event = EventUtil.getEvent(event);
        target =EventUtil.getTarget(event);
        switch(target.id)
        {
          case  'gosomewhere':
              loaction.href = "www.baidu.com";
              break;
          case  'dosomething':
              document.title = 'i am a new title';
              break;
          case  'sayhi':
              alert('hi')
              break;
        }
    })
    

      

  • 相关阅读:
    Asp.Net服务器控件开发的Grid实现(四)回发事件
    Win8的IIS中架设php
    jsonp其实很简单【ajax跨域请求】
    Asp.Net服务器控件开发的Grid实现(三)列编辑器
    Asp.Net服务器控件开发的Grid实现(二)Html标记渲染
    构建之法阅读笔记01
    四则运算2
    psp0
    随机生成30道四则运算
    学习进度条
  • 原文地址:https://www.cnblogs.com/xwtbk/p/6855592.html
Copyright © 2011-2022 走看看