首页 > 代码库 > 事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮

事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮

2024-10-02 14:21:01   217人阅读

clientX/Y           可视区的鼠标坐标                  全兼容
offsetX/Y           鼠标坐标到物体边框的距离    IE+Chrome
pageX/Y             页面                                    高级 浏览器
screenX/Y           屏幕                                    全兼容(没用)
 
 
var e =  evt || window.event;
 
evt作为参数兼容高级浏览器,window.event兼容低版本IE;(此处注意属性和变量eg:window.a和a,亲着是undefined,后者是is no difined)
 
添加事件的方法:
1 赋值的方法 ---document.onclick = function(){};  --->缺点:会覆盖;
取消事件的方法 document.onclick = null;
2 事件绑定------addEventListener(evname,fn,false)/attachEvent(‘on‘+evname,fn);
              兼容高级浏览器(false代表冒泡,true代表捕获)        兼容低版本IE(IE事件流只有冒泡)
取消绑定的方法  removeEventListener(evname,fn,false)/detachEvent(‘on‘+evname,fn);
DOM事件必须用时间绑定添加;
注意事件绑定的函数,不能作为匿名函数,而是用函数名来取消绑定
3 事件委托  利用事件冒泡,给父级加事件--->优点:1简化重复的函数代码2给未来的元素加事件
    给父级添加事件委托,this变为父级,要通过var oSrc=http://www.mamicode.com/oEvent.srcElement||oEvent.target;来获取事件源,IE和Chrome兼容srcElement , Firefox Chrome兼容target;Chrome都行
 
setCapture(),将所有的事件归集捕获给obj
releaseCapture()
 
 
 
取消事件冒泡的方法:
evt.stopPropagation();//非IE
window.event.cancelBubble = true;//IE中   
兼容写法:  window.event ? window.event.cancelBubble = true : evt.stopPropagation();
 
取消默认事件的方法:
evt.preventDefault();  非IE
window.event.returnValue = http://www.mamicode.com/false;/return false IE
return false阻止默认事件，遇到addEventListener会失效
  *用preventDefault解决
 
ready事件
 
高级浏览器:
document.addEventListener(‘DOMContentLoaded‘, function (){
      alert(‘ready‘);
    }, false);
 
 
低版本IE:(有interactive 和complete)
document.attachEvent(‘onreadystatechange‘, function (){
      if(document.readyState==‘complete‘){
        alert(‘ready‘);
      }
 
 
ready 的兼容写法:
 
function addReady(fn){
      if(document.addEventListener){
        document.addEventListener(‘DOMContentLoaded‘, fn, false);
      }else{
        document.attachEvent(‘onreadystatechange‘, function (){
          if(document.readyState==‘complete‘){
            fn();
          }
        });
      }
    }
 
 
 
滚轮事件:
 
wheelDelta      IE、Chrome
        上       正
        下       负
 
        detail          Firefox
        上       负
        下       正
 
 
//IE、Chrome
      /*oDiv.onmousewheel=function (){
        alert(‘a‘);
      };*/
 
 
 
 
 //FireFox——DOMMouseScroll
      oDiv.addEventListener(‘DOMMouseScroll‘, function (){
        alert(‘a‘);
      }, false);    DOM事件必须用事件绑定
 
滚轮的兼容写法1
 
function wheel(ev){
        var oEvent=ev||event;
        var down;
 
        if(oEvent.wheelDelta){
          if(oEvent.wheelDelta<0){
            down=true;
          }else{
            down=false;
          }
        }else{
          if(oEvent.detail<0){
            down=false;
          }else{
            down=true;
          }
        }
 
        if(down){
          alert(‘向下‘);
        }else{
          alert(‘向上‘);
        }
 
       
      }
 
      if(window.navigator.userAgent.indexOf(‘Firefox‘)!=-1){
        oDiv.addEventListener(‘DOMMouseScroll‘, wheel, false);
      }else{
        oDiv.onmousewheel=wheel;
      }
    }
 
 
 
//wheelDelta      IE、Chrome
        //上       正
        //下       负
 
        //detail          Firefox
        //上       负
        //下       正
 
 
滚轮写法2 和3
 
function wheel(ev){
        var oEvent=ev||event;
        var down;
 
        //down=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
        down=(oEvent.wheelDelta||-oEvent.detail)<0;
 
        if(down){
          alert(‘向下‘);
        }else{
          alert(‘向上‘);
        }
      }
 
      if(window.navigator.userAgent.indexOf(‘Firefox‘)!=-1){
        oDiv.addEventListener(‘DOMMouseScroll‘, wheel, false);
      }else{
        oDiv.onmousewheel=wheel;
      }
 
关于相等的问题  -->只有字符串是静态的,不可变的;
 
//alert(12==12);
    //alert(‘abc‘==‘abc‘);
 
    //alert([1,2,3]==[1,2,3]);
    //alert(new Array(1,2,3)==new Array(1,2,3));
 
    //[1,2,3]   =>    new Array(1,2,3)
 
//alert(12==12);
    //alert(‘abc‘==‘abc‘);
 
    alert({a: 12, b: 5}=={a: 12, b: 5});
 
    //{a: 12, b: 5}   =>    new Object()
 
//alert(12==12);
    //alert(‘abc‘==‘abc‘);
 
    /*var arr=[1,2,3];
 
    arr[1]=4;
 
    alert(arr);*/
 
    var str=‘abc‘;
 
    str[1]=‘d‘;
 
    alert(str);
只有字符串是静态的,不可变的;
 
//alert(function (){alert(‘abc‘)}==function (){alert(‘abc‘)});
    alert(new Function("alert(‘abc‘)")==new Function("alert(‘abc‘)"));
 
    /*var show=function (){
      alert(‘abc‘);
    };*/
    //var show=new Function("alert(‘abc‘);");
 
    //show();

事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮


联系
我们