JavaScript——事件委托:原理是利用事件冒泡

事件委托——利用事件冒泡
把点击事件,设置给li的父级 只指定一个事件处理程序,就可以管理某一类型的所有事件

是 在页面中 可能会有许多点击事件,许多鼠标,键盘事件,比如:
想给每个li 都设置不同的点击事件的话,要设置很多个onclick事件,会影响到 内存和性能

 <ul>
    <li></li>  // 点击弹出第一个li alert("第一个li")
    <li></li> // 点击弹出第二个li alert("第二个li")
    <li></li> // 点击弹出第三个li alert("第三个li")
    <li></li> // 点击弹出第四个li alert("第四个li")
</ul>

因此,出现了事情委托。
利用事件冒泡

 <ul id="myLink">
        <li id="goS">GO</li>
        <li id="doS">DO</li>
        <li id="sayHi">sayHi</li>
    </ul>
  <script>
  var EventUtil={

addHandler:function(element,type,handler){ //添加事件
    if(element.addEventListener){
        element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件
    }else if(element.attachEvent){                    //使用IE方法添加事件
        element.attachEvent("on"+type,handler);
    }else{
        element["on"+type]=handler;          //使用DOM0级方法添加事件
    }
},

removeHandler:function(element,type,handler){  //取消事件
    if(element.removeEventListener){
        element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,handler);
    }else{
        element["on"+type]=null;
    }
},

getEvent:function(event){  //使用这个方法跨浏览器取得event对象
    return event?event:window.event;
},

getTarget:function(event){  //返回事件的实际目标
    return event.target||event.srcElement;
},

preventDefault:function(event){   //阻止事件的默认行为
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue=false;
    }
},

stopPropagation:function(event){  //立即停止事件在DOM中的传播
    //避免触发注册在document.body上面的事件处理程序
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble=true;
    }
},

getRelatedTarget:function(event){  //获取mouseover和mouseout相关元素
    if(event.relatedTarget){
        return event.relatedTarget;
    }else if(event.toElement){      //兼容IE8-
        return event.toElement;
    }else if(event.formElement){
        return event.formElement;
    }else{
        return null;
    }
},

getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
    if(document.implementation.hasFeature("MouseEvents","2.0")){
        return event.button;
    }else{
        switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;  //按下的是鼠标主按钮(一般是左键)
            case 2:
            case 6:
                return 2;  //按下的是中间的鼠标按钮
            case 4:
                return 1;  //鼠标次按钮(一般是右键)
        }
    }
},

getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值
    if(event.wheelDelta){
        return event.wheelDelta;
    }else{
        return -event.detail*40;
    }
},

getCharCode:function(event){   //以跨浏览器取得相同的字符编码,需在keypress事件中使用
    if(typeof event.charCode=="number"){
        return event.charCode;
    }else{
        return event.keyCode;
    }
}

};
    //上面封装了EventUtil 下面可以使用它
    window.onload = function(){
    //获得ul 即要绑定的父元素
    var list = document.getElementById('myLink')
    //使用跨浏览器方法 EventUtil.addHandler 来绑定点击事件
    EventUtil.addHandler(list ,'click' , function(event){
    //因为event对象对于各个浏览器来说,不一样,有差异 所以用这个来取消浏览器的差异性
    event = EventUtil.getEvent(event);
     //因target 事件目标对于各个浏览器来说,不一样,有差异 所以用这个来取消浏览器的差异性
  var target = EventUtil.getTarget(event); 
  //条件选择语句 swithch   获取target.id 即li的id属性,用以区分点击的是哪个li
  switch(target.id){
      case 'goS':
      alert('GO')
      break;

      case 'doS':
      alert('DO')
      break;

      case 'sayHi':
      alert('sayHi')
      break;
  }
})

           }
        
    </script>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页