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;
        }
    })
    

      

  • 相关阅读:
    [zz]redhat6.0无法识别ntfs分区的解决方法
    使用ftp搭建yum源问题解决
    [zz]搭建centos6.0本地yum源(32位)
    JAVA传统线程技术
    JAVA判断字符串是否为数字
    java之异常
    随便记两笔Java中的反射
    【转】单例模式完全解析
    java.lang.Enum
    文件搜索
  • 原文地址:https://www.cnblogs.com/xwtbk/p/6855592.html
Copyright © 2011-2022 走看看