• 事件绑定与解绑


    事件绑定与解绑

    var EventUtil = {
    
    addHandler:function (obj, type, handler) {
    
    if(obj.addEventListener) {               //如果是标准浏览器,即支持addEventListener的
    
    console.log('标准浏览器');
    
    obj.addEventListener(type, handler);
    
    } else if(obj.attachEvent) {            //IE低版本浏览器
    
    console.log('IE低版本浏览器');
    
    obj.attachEvent('on' + type, handler);
    
    } else {
    
    console.log('以上都不支持');
    
    obj['on' + type] = handler;
    
    }
    
    },
    
    removeHandler:function(obj, type, handler) {
    
    if(obj.removeEventListener) {         //标准浏览器
    
    obj.removeEventListener(type, handler);
    
    } else if(obj.detachEvent) {          //IE低版本浏览器
    
    obj.detachEvent('on' + type, handler);
    
    } else {                              //以上皆不是
    
    obj['on' + type] = null;
    
    }
    
    }
    
    }

    问题:在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下,事件处理程序会在其元素的作用域内运行;在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window

     

    例:

    在低版本ie中div不变色

     

    在绑定事件的时候可以用

    function addHandler(obj,evname,fn){
    
    if(obj.addEventListener){
    
    obj.addEventListener(evname,fn,false);
    
    }else{
    
    obj.attachEvent('on'+evname,function(){
    
    fn.call(obj); //call方法第一个参数可以用来改变函数执行过程当中的内部this指向,attachEvent 下 this 指向的不是obj
    
    });
    
    }
    
    }
    
     
    
     
    

      

    在低版本ie下正常

     

     

    Obj.attachEvent(事件名称,事件函数)

    • 没有捕获
    • 事件有on
    • 事件函数执行顺序  (标准ie正序     非标准 倒序)
    • This指向window

     

    Obj.addEventListener(事件名称,事件函数,是否捕获)  ---->  默认false冒泡   true捕获

    • 有捕获
    • 事件名称没有on
    • 正序
    • this指向出发该事件的对象
    生命是一场华丽的绽放!
  • 相关阅读:
    OpenCMS创建导航条
    C++笔记(2)面向对象编程
    C++笔记(3)模板与泛型编程
    多线程和信号量
    C++笔记(4)用于大型程序的工具
    C++笔记(5)特殊工具与技术
    C++笔记(1)类
    Effective C++ 笔记(1)
    C语言笔记整理(2)
    C语言笔记整理(3)
  • 原文地址:https://www.cnblogs.com/clown3/p/6172192.html
Copyright © 2020-2023  润新知